Skip to content

Commit de491cd

Browse files
westonruterwestonruter
authored
Support converting YouTube iframes with 100% width to amp-youtube with fixed-height (#6837)
1 parent e0577eb commit de491cd

File tree

3 files changed

+70
-9
lines changed

3 files changed

+70
-9
lines changed

‎includes/embeds/class-amp-base-embed-handler.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ public function get_scripts() {
9191
* Get regex pattern for matching HTML attributes from a given tag name.
9292
*
9393
* @since 1.5.0
94+
* @todo This does not currently work with single-quoted attribute values or non-quoted attributes.
9495
*
9596
* @param string $html HTML source haystack.
9697
* @param string $tag_name Tag name.

‎includes/embeds/class-amp-youtube-embed-handler.php

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* @package AMP
66
*/
77

8+
use AmpProject\CssLength;
89
use AmpProject\Dom\Document;
910
use AmpProject\Dom\Element;
1011
use AmpProject\Extension;
@@ -92,15 +93,15 @@ public function __construct( $args = [] ) {
9293
*/
9394
public function register_embed() {
9495
add_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ], 10, 2 );
95-
add_filter( 'wp_video_shortcode_override', [ $this, 'video_override' ], 10, 2 );
96+
add_filter( 'wp_video_shortcode_override', [ $this, 'video_override' ], PHP_INT_MAX, 2 );
9697
}
9798

9899
/**
99100
* Unregister embed.
100101
*/
101102
public function unregister_embed() {
102103
remove_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ], 10 );
103-
remove_filter( 'wp_video_shortcode_override', [ $this, 'video_override' ], 10 );
104+
remove_filter( 'wp_video_shortcode_override', [ $this, 'video_override' ], PHP_INT_MAX );
104105
}
105106

106107
/**
@@ -145,6 +146,7 @@ public function render( $html, $url, $video_id ) {
145146
$attributes[ $iframe_prop ] = $props[ $iframe_prop ];
146147
}
147148
}
149+
$attributes = $this->amend_fixed_height_layout( $attributes );
148150

149151
$placeholder = $this->get_placeholder_markup( $url, $video_id, $attributes );
150152

@@ -209,6 +211,8 @@ private function get_amp_component( Document $dom, Element $node ) {
209211
return false;
210212
}
211213

214+
$attributes = $this->amend_fixed_height_layout( $attributes );
215+
212216
$amp_node = AMP_DOM_Utils::create_node(
213217
$dom,
214218
Extension::YOUTUBE,
@@ -224,6 +228,24 @@ private function get_amp_component( Document $dom, Element $node ) {
224228
return $amp_node;
225229
}
226230

231+
/**
232+
* Amend attributes with fixed-height layout if there is a 100% width present.
233+
*
234+
* @param array $attributes Attributes.
235+
* @return array Amended attributes.
236+
*/
237+
private function amend_fixed_height_layout( $attributes ) {
238+
if (
239+
isset( $attributes[ Attribute::WIDTH ] )
240+
&&
241+
( '100%' === $attributes[ Attribute::WIDTH ] || CssLength::AUTO === $attributes[ Attribute::WIDTH ] )
242+
) {
243+
$attributes[ Attribute::LAYOUT ] = Layout::FIXED_HEIGHT;
244+
$attributes[ Attribute::WIDTH ] = CssLength::AUTO;
245+
}
246+
return $attributes;
247+
}
248+
227249
/**
228250
* Prepare attributes for amp-youtube component.
229251
*
@@ -297,7 +319,7 @@ private function get_placeholder_element( Element $amp_component, $video_id, $at
297319
Attribute::OBJECT_FIT => 'cover',
298320
];
299321

300-
if ( $attributes[ Attribute::TITLE ] ) {
322+
if ( ! empty( $attributes[ Attribute::TITLE ] ) ) {
301323
$img_attributes[ Attribute::ALT ] = $attributes[ Attribute::TITLE ];
302324
}
303325

@@ -493,6 +515,11 @@ public function video_override( $html, $attr ) {
493515
return $html;
494516
}
495517

518+
// Construct a tag so that any width/height attributes will be passed along.
519+
if ( ! $html ) {
520+
$html = AMP_HTML_Utils::build_tag( Tag::IFRAME, $attr );
521+
}
522+
496523
return $this->render( $html, $src, $video_id );
497524
}
498525
}

‎tests/php/test-class-amp-youtube-embed-handler.php

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* @since 0.7
77
*/
88

9+
use AmpProject\AmpWP\Tests\Helpers\MarkupComparison;
910
use AmpProject\AmpWP\Tests\Helpers\PrivateAccess;
1011
use AmpProject\AmpWP\Tests\Helpers\WithoutBlockPreRendering;
1112
use AmpProject\AmpWP\Tests\TestCase;
@@ -17,6 +18,7 @@
1718
*/
1819
class Test_AMP_YouTube_Embed_Handler extends TestCase {
1920

21+
use MarkupComparison;
2022
use PrivateAccess;
2123
use WithoutBlockPreRendering {
2224
setUp as public prevent_block_pre_render;
@@ -114,7 +116,7 @@ public function test_register_and_unregister_embed() {
114116
$embed = new AMP_YouTube_Embed_Handler();
115117
$embed->register_embed();
116118
$this->assertEquals( 10, has_filter( 'embed_oembed_html', [ $embed, 'filter_embed_oembed_html' ] ) );
117-
$this->assertEquals( 10, has_filter( 'wp_video_shortcode_override', [ $embed, 'video_override' ] ) );
119+
$this->assertEquals( PHP_INT_MAX, has_filter( 'wp_video_shortcode_override', [ $embed, 'video_override' ] ) );
118120
$embed->unregister_embed();
119121
$this->assertFalse( has_filter( 'embed_oembed_html', [ $embed, 'filter_embed_oembed_html' ] ) );
120122
$this->assertFalse( has_filter( 'wp_video_shortcode_override', [ $embed, 'video_override' ] ) );
@@ -156,6 +158,10 @@ public function sanitize_raw_embeds_data_provider() {
156158
'source' => '<iframe src="https://www.youtube.com/feed/library" title="YouTube Library" width="560" height="315"></iframe>',
157159
'expected' => '<iframe src="https://www.youtube.com/feed/library" title="YouTube Library" width="560" height="315"></iframe>',
158160
],
161+
'youtube-fixed-height' => [
162+
'source' => '<iframe width="100%" height="315" src="https://www.youtube.com/embed/s52JNMT59s8"></iframe>',
163+
'expected' => '<amp-youtube layout="fixed-height" width="auto" height="315" data-videoid="s52JNMT59s8"><a placeholder="" href="https://www.youtube.com/watch?v=s52JNMT59s8"><img src="https://i.ytimg.com/vi/s52JNMT59s8/hqdefault.jpg" layout="fill" object-fit="cover"></a></amp-youtube>',
164+
],
159165
];
160166
}
161167

@@ -166,6 +172,7 @@ public function sanitize_raw_embeds_data_provider() {
166172
* @covers ::get_amp_component()
167173
* @covers ::get_placeholder_element()
168174
* @covers ::prepare_attributes()
175+
* @covers ::amend_fixed_height_layout()
169176
*/
170177
public function test_sanitize_raw_embeds( $source, $expected ) {
171178

@@ -180,7 +187,7 @@ public function test_sanitize_raw_embeds( $source, $expected ) {
180187

181188
$content = AMP_DOM_Utils::get_content_from_dom( $dom );
182189

183-
$this->assertEquals( $expected, trim( $content ) );
190+
$this->assertEqualMarkup( $expected, $content );
184191
}
185192

186193
/**
@@ -190,6 +197,7 @@ public function test_sanitize_raw_embeds( $source, $expected ) {
190197
* @covers ::video_override()
191198
* @covers ::render()
192199
* @covers ::get_placeholder_markup()
200+
* @covers ::amend_fixed_height_layout()
193201
*/
194202
public function test_video_override() {
195203
remove_all_filters( 'wp_video_shortcode_override' );
@@ -201,8 +209,33 @@ public function test_video_override() {
201209
];
202210

203211
$youtube_shortcode = $this->handler->video_override( '', $attr_youtube );
204-
$this->assertStringContainsString( '<amp-youtube', $youtube_shortcode );
205-
$this->assertStringContainsString( $youtube_id, $youtube_shortcode );
212+
$this->assertEqualMarkup(
213+
'<amp-youtube layout="responsive" width="600" height="338" data-videoid="XOY3ZUO6P0k"><a placeholder href="https://youtu.be/XOY3ZUO6P0k"><img src="https://i.ytimg.com/vi/XOY3ZUO6P0k/hqdefault.jpg" layout="fill" object-fit="cover"></a></amp-youtube>',
214+
$youtube_shortcode
215+
);
216+
217+
// Test when wp_video_shortcode_override filter has already overridden the markup.
218+
$youtube_shortcode = $this->handler->video_override( "<iframe width=\"200\" height=\"100\" src=\"$youtube_src\"></iframe>", $attr_youtube );
219+
$this->assertEqualMarkup(
220+
'<amp-youtube layout="responsive" width="200" height="100" data-videoid="XOY3ZUO6P0k"><a placeholder href="https://youtu.be/XOY3ZUO6P0k"><img src="https://i.ytimg.com/vi/XOY3ZUO6P0k/hqdefault.jpg" layout="fill" object-fit="cover"></a></amp-youtube>',
221+
$youtube_shortcode
222+
);
223+
224+
// Test 100% width in video shortcode.
225+
$youtube_shortcode = $this->handler->video_override(
226+
'',
227+
array_merge(
228+
$attr_youtube,
229+
[
230+
'width' => '100%',
231+
'height' => '315',
232+
]
233+
)
234+
);
235+
$this->assertEqualMarkup(
236+
'<amp-youtube layout="fixed-height" width="auto" height="315" data-videoid="XOY3ZUO6P0k"><a placeholder href="https://youtu.be/XOY3ZUO6P0k"><img src="https://i.ytimg.com/vi/XOY3ZUO6P0k/hqdefault.jpg" layout="fill" object-fit="cover"></a></amp-youtube>',
237+
$youtube_shortcode
238+
);
206239

207240
$vimeo_id = '64086087';
208241
$vimeo_src = 'https://vimeo.com/' . $vimeo_id;
@@ -313,9 +346,9 @@ public function test__conversion( $source, $expected, $fallback_for_expected = n
313346
version_compare( strtok( get_bloginfo( 'version' ), '-' ), '5.1', '<' )
314347
&& null !== $fallback_for_expected
315348
) {
316-
$this->assertEquals( $fallback_for_expected, $filtered_content );
349+
$this->assertEqualMarkup( $fallback_for_expected, $filtered_content );
317350
} else {
318-
$this->assertEquals( $expected, $filtered_content );
351+
$this->assertEqualMarkup( $expected, $filtered_content );
319352
}
320353
}
321354

0 commit comments

Comments
 (0)