-
Notifications
You must be signed in to change notification settings - Fork 383
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preserve seek time and other parameters to amp-youtube
from YouTube embeds
#6423
Conversation
Plugin builds for da36d2d are ready 🛎️!
|
There are additional parameters which the embed API supports: https://developers.google.com/youtube/player_parameters For example, if you add a “raw embed” via the Custom HTML block with: <iframe width="560" height="315" src="https://www.youtube.com/embed/0zM3nApSvMg?controls=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> This should result in an I think any query parameters on the YouTube embed URL should be copied to For the YouTube Embed block specifically, it appears that only the Humm, but actually in looking at |
cc @pierlon for his thoughts on this since he's done a lot of work with embeds in the past |
463ceb7
to
b477337
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on this @dhaval-parekh.
Left a few comments here that should help move this PR forward.
7a31e69
to
cf81afa
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good so far! Just a few comments and suggestions to be made.
|
||
preg_match( $regex, $parsed_url['fragment'], $matches ); | ||
|
||
if ( ! empty( $matches ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or alternatively (to make sure the match groups do indeed exist):
if ( ! empty( $matches ) ) { | |
if ( isset( $matches['minutes'], $matches['seconds'] ) ) { |
*/ | ||
public function process_embed( Document $dom, $html, $url ) { | ||
|
||
$id = $this->get_video_id_from_url( $url ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just realized the AMP component can also [accept a YouTube channel id](Youtube channel id), so we need to provide support for that as well. So if there is no video ID, then check for a live channel ID.
From the docs:
For example, in this URL:
https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q
,UCB8Kb4pxYzsDsHxzBfnid4Q
is the channel id. You can provide adata-live-channelid
instead of adata-videoid
attribute to embed a stable url for a live stream instead of a video.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@pierlon I have added support for live streaming channels for iframe added as custom HTML markup.
However, WordPress by default does not provide support for embedding YouTube URLs (It will just render as text)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If WordPress never supported it I think it's safe to say we don't have to either.
@pierlon I have added support for live streaming channels for iframe added as custom HTML markup.
I tried this but it parsed an incorrect video ID. Eg:
<iframe src="https://www.youtube.com/embed/live_stream?channel=12345" allowfullscreen="" width="560" height="315"></iframe>
Gives:
<amp-youtube data-videoid="live_stream" layout="responsive" width="560" height="315" data-param-channel="12345" ...</amp-youtube>
Instead, the data-videoid
attribute should not have been set, nor the data-param-channel
attribute. Perhaps we could add a condition to say if the parsed video ID is live_stream
then it's invalid and bail.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have addressed this issue.
$iframe_props = [ 'title', 'height', 'width' ]; | ||
$props = $this->match_element_attributes( $html, 'iframe', $iframe_props ); | ||
foreach ( $iframe_props as $iframe_prop ) { | ||
if ( ! empty( $props[ $iframe_prop ] ) ) { | ||
$attributes[ $iframe_prop ] = $props[ $iframe_prop ]; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This could be moved to the prepare_attributes()
method as it seems more relevant there.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These three attributes parse differently in render()
(from HTML markup) and in get_amp_component()
(from DOMElement). That is a reason it's parse saperatlly.
d9faed3
to
9728368
Compare
9728368
to
8c97e14
Compare
$attributes | ||
); | ||
|
||
if ( ! empty( $amp_node ) && is_a( $amp_node, '\DOMElement' ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if ( ! empty( $amp_node ) && is_a( $amp_node, '\DOMElement' ) ) { | |
if ( ! empty( $amp_node ) && $amp_node instanceof Element ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for your hard work on this @dhaval-parekh, passing this on to @westonruter for final review.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dhaval-parekh A few tests are failing. It seems just the expected link in the text data needs to be updated.
continue; | ||
} | ||
|
||
$attributes[ sanitize_key( "data-param-$key" ) ] = esc_attr( $value ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Escaping shouldn't be done here because the returned attributes array may be sent into the DOM directly, in which case the escaping will be duplicated.
$attributes[ sanitize_key( "data-param-$key" ) ] = esc_attr( $value ); | |
$attributes[ sanitize_key( "data-param-$key" ) ] = $value; |
Use original YouTube URL as placeholder when sanitizing raw embed Fix phpcs alignment warning Use constant instead of member variable Let Document::fromNode() obtain the ownerDocument Deduplicate iframe_props into constant
@dhaval-parekh The phpstan ignores that you added caused errors for me locally in the same way as they caused build failures on GHA. So I reverted them in 3ecad1e. It may be that you have a stale copy of phpstan. I have v0.12.76 (humm, which is also stale). I thought that |
Er, when I upgrade to
So apparently GitHub's copy is stale and you were on the latest version. |
This reverts commit 7f21703.
@westonruter As an alternative, might I suggest installing PHPStan from the diff --git a/.github/workflows/build-test-measure.yml b/.github/workflows/build-test-measure.yml
--- a/.github/workflows/build-test-measure.yml (revision 08017ae8e1da05ae8e445e51807610e4e5365599)
+++ b/.github/workflows/build-test-measure.yml (date 1631210205414)
@@ -214,6 +214,7 @@
# phpstan requires PHP 7.1+.
php-version: 7.4
extensions: dom, iconv, json, libxml, zip
+ tools: phpstan
- name: Get Composer Cache Directory
id: composer-cache
@@ -231,7 +232,7 @@
run: composer install
- name: Static Analysis (PHPStan)
- run: vendor/bin/phpstan analyse
+ run: phpstan analyse
#-----------------------------------------------------------------------------------------------------------------------
|
Co-authored-by: Pierre Gordon <[email protected]>
amp-youtube
from YouTube embeds
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whew! This was a deceptively complicated one!
Summary
Fixes #4518
Checklist