WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

#40866 closed defect (bug) (fixed)

Video widget does not successfully play several permutations of YouTube URLs

Reported by: jnylen0 Owned by: westonruter
Milestone: 4.8 Priority: normal
Severity: normal Version: 4.8
Component: Widgets Keywords: has-patch has-unit-tests commit dev-reviewed
Focuses: Cc:

Description

When attempting to insert a YouTube video into a video widget via "Insert from URL", different kinds of YouTube URLs generate different results:

Other notes:

  • All of these URLs appear to work correctly in the media modal preview.
  • This is on a HTTPS-enabled site.
  • Probably unrelated, but I'm getting a lot of errors like Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://mysite.com'). on front-end page load.

Attachments (4)

40866.1.diff (2.2 KB) - added by timmydcrawford 4 months ago.
40866.2.diff (2.2 KB) - added by timmydcrawford 4 months ago.
40866.3.diff (2.2 KB) - added by westonruter 4 months ago.
Tweak comments; condense conditional
40866.4.diff (2.3 KB) - added by jnylen0 4 months ago.
Fix the test suite; use set_url_scheme; tweak comments

Download all attachments as: .zip

Change History (17)

#1 @westonruter
4 months ago

  • Keywords needs-patch added

In a post editor, if I add the following:

[video src="https://www.youtube.com/watch?v=i_cVJgIz_Cs&feature=youtu.be"]

[video src="https://www.youtube.com/watch?v=i_cVJgIz_Cs"]

Then when I look at the rendered output it generates:

<video class="wp-video-shortcode" id="video-97-1" width="640" height="360" preload="metadata" controls="controls"><source type="video/youtube" src="https://www.youtube.com/watch?v=i_cVJgIz_Cs&#038;feature=youtu.be&#038;_=1" /><a href="https://www.youtube.com/watch?v=i_cVJgIz_Cs&#038;feature=youtu.be">https://www.youtube.com/watch?v=i_cVJgIz_Cs&#038;feature=youtu.be</a></video>

<video class="wp-video-shortcode" id="video-97-2" width="640" height="360" preload="metadata" controls="controls"><source type="video/youtube" src="https://www.youtube.com/watch?v=i_cVJgIz_Cs&#038;_=2" /><a href="https://www.youtube.com/watch?v=i_cVJgIz_Cs">https://www.youtube.com/watch?v=i_cVJgIz_Cs</a></video>

But then when ME.js builds the players, I then see the first iframe URL is clearly wrong compared to the second:

Notice how the first one lacks the video ID entirely.

I think we need to (1) upgrade the URLs to be HTTPS, and (2) normalize the YouTube and Vimeo URLs

#2 @westonruter
4 months ago

Here is the YouTube video URL parsing code in ME.js that we need to target: https://github.com/mediaelement/mediaelement/blob/2.22.0/src/js/me-shim.js#L585-L621

#3 @jnylen0
4 months ago

As noted in Slack discussion, this is partly a pre-existing issue. However, what's new in 4.8 is that the video widget displays the video preview as though the video is going to play, but then it's broken on the front-end. To me this UX issue is a reason to fix this in 4.8.

See also #39686.

#4 @westonruter
4 months ago

We also need to normalize the Vimeo URLs as I can see that ME.js 2.22 also chokes on Vimeo URLs with extra query params present.

#5 @timmydcrawford
4 months ago

Related issue from the mejs repo: https://github.com/mediaelement/mediaelement/issues/1938

So it seems the conversion to https along with the removal of query params should probably happen in the video shortcode logic to best cover both use cases ( video widget and direct shortcode usage ). FWIW I've never seen a Vimeo share/embed link have url args attached to it - but still having an argument whitelist for both services seems like a great way to safeguard random bugs like this.

#6 @timmydcrawford
4 months ago

  • Keywords has-patch has-unit-tests added; needs-patch removed

In 40866.1.diff I have added logic to wp_video_shortcode() to fix the issues noted above for YouTube and Vimeo urls in the mediaelement player. The YouTube fix specifically targets the problematic argument of feature which was the common failing point between @jnylen0 's bug report, and the issue noted in the mejs repository too.

A part of me things we could go a step further here and filter out only approved YouTube parameters ( https://developers.google.com/youtube/player_parameters ) - but even then someone could mangle a URL and include youtu.be in a query argument and cause mejs to break. So I considered replacing all occurrences of youtu.be in the query string, but my concern is it might be valid in some URLs... YouTube has a wide variety of supported urls - so in the end I opted to remove the one usage we know was causing the breakage.

#7 @timmydcrawford
4 months ago

Also found #37363 - which was another instance where mejs broke due to a youtube URL format

#8 @timmydcrawford
4 months ago

Removed errant extra wp_enque_script in 40866.2.diff

@westonruter
4 months ago

Tweak comments; condense conditional

#9 @westonruter
4 months ago

  • Keywords commit added

This ticket was mentioned in Slack in #core by westonruter. View the logs.


4 months ago

#11 @westonruter
4 months ago

  • Keywords dev-feedback added

@jnylen0
4 months ago

Fix the test suite; use set_url_scheme; tweak comments

#12 @jnylen0
4 months ago

  • Keywords dev-reviewed added; dev-feedback removed
  • Owner set to westonruter
  • Status changed from new to assigned

The patch fixes all the issues in the report, nice work!

The "Failed to execute 'postMessage'" errors are still present, but this doesn't seem to be breaking anything.

In 40866.4.diff:

  • Fix the test suite - because of this lovely static variable, this test has to be the first one that calls wp_video_shortcode. In the other tests this is accomplished by depending on the first test, so I've done the same here.
  • Use set_url_scheme instead of a direct regex replace to set the URL scheme to https (docs).
  • Further comments tweaks.

Annoyingly, when running phpunit --filter Tests_Media multiple times, there is still a test that fails unless you remove the media file it creates (test_wp_get_attachment_image_should_use_wp_get_attachment_metadata) - but this is a pre-existing issue and can be fixed separately.

Last edited 4 months ago by jnylen0 (previous) (diff)

#13 @westonruter
4 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 40847:

Widgets: Normalize YouTube and Vimeo URLs in video shortcode (primarily for Video widget) to work around ME.js 2.22 bug.

Props timmydcrawford, jnylen0, westonruter.
See #32417, #39994.
Fixes #40866.

Note: See TracTickets for help on using tickets.