Improve handling of YouTube embeds #3358

westonruter · 2019-09-27T01:16:36Z

This pull request aims to clean up handling of YouTube embed handling, in large part to apply similar improvements as #2722 for SoundCloud.

Preserve original YouTube iframe title as placeholder content: <a placeholder href="https://youtube.com/watch?v=tiQcA7cwEMo"><img alt="AMP for JavaScripters" ...></a>. See Improve handling of YouTube embeds #3358 (comment).
Add the title attribute to the amp-youtube element for a11y, in addition to the fallback content. See iFrame Title Attribute #3313 (comment).
Merge test-amp-youtube-embed.php and test-class-amp-youtube-embed-handler.php, update tests following model of Improve Soundcloud embed: support playlists, preserve visual/height params, include fallback content #2722.
Fix video ID parsing logic. See Undefined index: query (class-amp-youtube-embed.php in AMP_YouTube_Embed_Handler::get_video_id_from_url) #3348.

Fixes #3348. Fixes #3313.

Relates to #3309 in that the shortcode logic needs to be removed/moved to Jetpack.

westonruter · 2019-09-27T01:27:05Z

This PR is free for anyone to take over.

….php

googlebot · 2019-11-08T01:41:48Z

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

westonruter · 2019-11-08T01:43:20Z

@googlebot I consent.

pierlon · 2019-11-08T01:43:50Z

@googlebot I consent.

googlebot · 2019-11-08T01:43:57Z

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

…dler.php

westonruter · 2019-11-08T20:27:51Z

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

 	 *
 	 * @param array  $matches URL pattern matches.
 	 * @param array  $attr    Shortcode attribues.
 	 * @param string $url     URL.
 	 * @return string Rendered oEmbed.
 	 */
 	public function oembed( $matches, $attr, $url ) {
+		_deprecated_function( __METHOD__, '1.3.1' );


Suggested change

_deprecated_function( __METHOD__, '1.3.1' );

_deprecated_function( __METHOD__, '1.5.0' );

westonruter · 2019-11-08T20:37:11Z

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

 			]
 		);

 		if ( empty( $args['video_id'] ) ) {
 			return AMP_HTML_Utils::build_tag(
 				'a',
 				[
-					'href'  => esc_url( $args['url'] ),
+					'href'  => esc_url( $url ),


Just realized that this needs to rather be esc_url_raw() since the HTML entity encoding will be handled by the DOM. If there are other places where esc_url() is being used in this way, it should be updated to be esc_url_raw() as well.

westonruter · 2019-11-08T20:37:42Z

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

@@ -162,7 +223,7 @@ private function get_video_id_from_url( $url ) {
 		} else {
 			/* phpcs:ignore Squiz.PHP.CommentedOutCode.Found
 			The query looks like ?v={id} or ?list={id} */
-			parse_str( $parsed_url['query'], $query_args );
+			parse_str( $parsed_url['query'], $query_args ); // @todo Bug! See <https://github.com/ampproject/amp-wp/issues/3348>.


To be done in this PR or another?

That needs to be removed as the embed_oembed_html filter correctly handles the URL and transforms it into an embeddable one.

westonruter · 2019-11-08T20:37:49Z

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

 		);
 	}

 	/**
 	 * Determine the video ID from the URL.
 	 *
+	 * @todo Needs to be totally refactored.


In this PR or another?

Will be done in this PR.

westonruter · 2019-11-08T20:40:18Z

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

+	/**
+	 * @dataProvider get_conversion_data
+	 */
+	public function test__conversion( $source, $expected, $fallback = null ) {


Could you rename $fallback to be something else here? It gets confusing with fallback content in AMP. Perhaps $expected_without_fallback would be better.

Ah, OK. $expected_without_fallback seems a bit confusing as well, how about something direct like $fallback_for_expected?

westonruter · 2019-11-08T20:56:33Z

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

+		if ( preg_match( '#<iframe[^>]*?title="(?P<title>[^"]+)"#s', $html, $matches ) ) {
+			$props['title']    = $matches['title'];
+			$props['fallback'] = sprintf(
+				'<a fallback href="%s">%s</a>',


I keep arguing with myself whether this should be a fallback or a placeholder: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/

Actually, I think the answer is this should be changed to rather be an amp-img as a placeholder as shown on the amp-youtube docs:

<amp-youtube id="myLiveChannel" data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q" width="358" height="204" layout="responsive"> <amp-img src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg" placeholder layout="fill" /> </amp-youtube>

The example there is incomplete however. In particular, the amp-img should have an alt attribute provided which is the title of the video.

Also, instead of actually generating an amp-img here, just output a regular img as it will get converted into an amp-img later by the image sanitizer.

Also, the amp-img placeholder would be suitable even when there is no title available, it's just that the alt would have to be blank.

Also, keeping the link to the original YouTube video is good.

So what to do:

Unconditionally construct the link regardless of whether the iframe has a title.

Change this to be placeholder instead of fallback.

Parse construct the HQ video thumbnail from the video ID (e.g. https://i.ytimg.com/vi/$video_id/hqdefault.jpg).

Supply an img element as the child of the a link.

Supply the title of the iframe as the img[alt], if available.

So in the end, it should look like this:

<p> <amp-youtube data-videoid="kfVsfOSbJY0" layout="responsive" width="480" height="270" title="Rebecca Black - Friday"> <a placeholder href="https://www.youtube.com/watch?v=kfVsfOSbJY0"> <img src="https://i.ytimg.com/vi/kfVsfOSbJY0/hqdefault.jpg" alt="Rebecca Black – Friday" data-amp-layout="fill"> </a> </amp-youtube> </p>

And in WordPress<5.2, the only difference would be no alt attribute on the img and no title on the amp-youtube.

pierlon · 2019-11-09T20:14:59Z

Hey @schlessera, you're needed to give consent over here again 😄

schlessera · 2019-11-09T20:15:28Z

@pierlon It's already done.

pierlon · 2019-11-09T20:15:58Z

Ah, thanks!

pierlon · 2019-11-09T20:59:24Z

@westonruter on WP <5.2, the title attribute on amp-youtube and the alt attribute on img lingers without a value. Would that be of concern?

…Tube embeds

westonruter · 2019-11-10T00:20:26Z

on WP <5.2, the title attribute on amp-youtube and the alt attribute on img lingers without a value. Would that be of concern?

@pierlon Yeah, it would probably be best if the attributes were removed on PHP 5.2. I've adjusted them in 97e8db5.

westonruter · 2019-11-10T00:32:50Z

I've improved the display of the placeholder image in fc0e9e0 by using object-fit=cover.

Before:

After:

westonruter · 2019-11-10T00:33:25Z

Aside: I'm curious why the amp-youtube element doesn't provide such a placeholder by default.

schlessera · 2019-11-10T12:59:06Z

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

+	 * @param string[] $attribute_names Attribute names.
+	 * @return string Regular expression pattern.
+	 */
+	protected function get_html_attribute_pattern( $tag_name, $attribute_names ) {


If you make this reusable, why not include the preg_match() call? Something like match_element_attributes( $tag_name, $attribute_names ).

This way, usage could be simplified:

$props = $this->match_element_attributes( 'iframe', [ 'src', 'title', 'width', 'height' ] );

Excellent point. I didn't refactor far enough. See d45fd59.

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

westonruter · 2019-11-10T16:35:02Z

I'm excited about the changes here. Huge improvements to YouTube embed handling. Great fallback even for when JS is turned off in the browser:

csossi · 2019-11-12T21:49:11Z

Verified in QA

googlebot added the cla: yes Signed the Google CLA label Sep 27, 2019

westonruter mentioned this pull request Sep 27, 2019

iFrame Title Attribute #3313

Closed

westonruter added this to the v1.3.1 milestone Sep 27, 2019

swissspidy modified the milestones: v1.3.1, v1.4 Oct 17, 2019

westonruter modified the milestones: v1.4, v.1.4.1 Oct 29, 2019

westonruter modified the milestones: v.1.4.1, v1.5 Nov 7, 2019

westonruter and others added 3 commits November 7, 2019 16:50

Preserve original YouTube iframe title as fallback content

35260fd

Add title attribute to amp-youtube in addition to fallback content

2f43691

Rename class-amp-youtube-embed.php to class-amp-youtube-embed-handler…

26faef0

….php

pierlon force-pushed the update/youtube-handling branch from b517472 to 68d68d8 Compare November 8, 2019 01:41

googlebot added cla: no Has not signed the Google CLA and removed cla: yes Signed the Google CLA labels Nov 8, 2019

pierlon marked this pull request as ready for review November 8, 2019 01:42

googlebot added cla: yes Signed the Google CLA and removed cla: no Has not signed the Google CLA labels Nov 8, 2019

pierlon added 2 commits November 7, 2019 20:45

Merge test-amp-youtube-embed.php and test-class-amp-youtube-embed-han…

ceec460

…dler.php

Mock oEmbed responses

5225f4e

pierlon force-pushed the update/youtube-handling branch from 68d68d8 to 5225f4e Compare November 8, 2019 01:46

Make tests compatible with WP 5.1 and below

4e58e82

westonruter mentioned this pull request Nov 8, 2019

Undefined index: query (class-amp-youtube-embed.php in AMP_YouTube_Embed_Handler::get_video_id_from_url) #3348

Closed

westonruter commented Nov 8, 2019

View reviewed changes

googlebot added the cla: yes Signed the Google CLA label Nov 9, 2019

westonruter added 2 commits November 9, 2019 16:10

Extract HTML attribute parsing logic into base class, and use for You…

514bfd9

…Tube embeds

Prevent copying empty title/alt in WP<5.2

97e8db5

Add object-fit=contain to amp-youtube placeholder image

fc0e9e0

westonruter added 2 commits November 9, 2019 16:34

Remove empty alt attributes

933c050

Replace incorrect usage of esc_url() with esc_url_raw()

6b92d0a

westonruter requested a review from schlessera November 10, 2019 00:43

schlessera requested changes Nov 10, 2019

View reviewed changes

westonruter added 2 commits November 10, 2019 07:41

Quote variables added to regex pattern

62e7ee1

Re-factor get_html_attribute_pattern as match_element_attributes

d45fd59

westonruter requested a review from schlessera November 10, 2019 15:54

schlessera approved these changes Nov 10, 2019

View reviewed changes

westonruter merged commit acdad29 into develop Nov 10, 2019

westonruter deleted the update/youtube-handling branch November 10, 2019 16:28

westonruter mentioned this pull request Nov 12, 2019

Provide a placeholder element for Twitter embeds #1753

Merged

4 tasks

csossi added the QA passed Has passed QA and is done label Feb 6, 2020

westonruter added the Changelogged label Mar 23, 2020

westonruter mentioned this pull request Apr 1, 2020

YouTube videos with IDs containing hyphens fail to embed #4504

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve handling of YouTube embeds #3358

Improve handling of YouTube embeds #3358

westonruter commented Sep 27, 2019 •

edited by pierlon

Loading

westonruter commented Sep 27, 2019

googlebot commented Nov 8, 2019

westonruter commented Nov 8, 2019

pierlon commented Nov 8, 2019

googlebot commented Nov 8, 2019

westonruter Nov 8, 2019

westonruter Nov 8, 2019

westonruter Nov 8, 2019

pierlon Nov 8, 2019

westonruter Nov 8, 2019

pierlon Nov 9, 2019

westonruter Nov 8, 2019

pierlon Nov 9, 2019

westonruter Nov 8, 2019 •

edited

Loading

pierlon commented Nov 9, 2019

schlessera commented Nov 9, 2019

pierlon commented Nov 9, 2019

pierlon commented Nov 9, 2019 •

edited

Loading

westonruter commented Nov 10, 2019

westonruter commented Nov 10, 2019

westonruter commented Nov 10, 2019

schlessera Nov 10, 2019

westonruter Nov 10, 2019

westonruter commented Nov 10, 2019

csossi commented Nov 12, 2019

	_deprecated_function( __METHOD__, '1.3.1' );
	_deprecated_function( __METHOD__, '1.5.0' );

Improve handling of YouTube embeds #3358

Improve handling of YouTube embeds #3358

Conversation

westonruter commented Sep 27, 2019 • edited by pierlon Loading

westonruter commented Sep 27, 2019

googlebot commented Nov 8, 2019

westonruter commented Nov 8, 2019

pierlon commented Nov 8, 2019

googlebot commented Nov 8, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter Nov 8, 2019 • edited Loading

Choose a reason for hiding this comment

pierlon commented Nov 9, 2019

schlessera commented Nov 9, 2019

pierlon commented Nov 9, 2019

pierlon commented Nov 9, 2019 • edited Loading

westonruter commented Nov 10, 2019

westonruter commented Nov 10, 2019

westonruter commented Nov 10, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Nov 10, 2019

csossi commented Nov 12, 2019

westonruter commented Sep 27, 2019 •

edited by pierlon

Loading

westonruter Nov 8, 2019 •

edited

Loading

pierlon commented Nov 9, 2019 •

edited

Loading