Video widget does not successfully play several permutations of YouTube URLs

[jnylen0]

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

• ​https://www.youtube.com/watch?v=i_cVJgIz_Cs - works fine
• ​https://www.youtube.com/watch?v=i_cVJgIz_Cs&feature=youtu.be - does not play on the front-end; the video iframe does not appear to have a video ID
• ​https://youtu.be/i_cVJgIz_Cs - works fine
• ​http://youtu.be/i_cVJgIz_Cs - fails with a mixed-content error on front-end page load

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.

[westonruter]

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:

• ​https://www.youtube.com/embed/watch?controls=0&wmode=transparent&enablejsapi=1&origin=http%3A%2F%2Fwestonruter.example.com&widgetid=2
• ​https://www.youtube.com/embed/i_cVJgIz_Cs?controls=0&wmode=transparent&enablejsapi=1&origin=http%3A%2F%2Fwestonruter.example.com&widgetid=1

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

[westonruter]

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

[jnylen0]

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.

[westonruter]

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.

[timmydcrawford]

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.

[timmydcrawford]

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.

[timmydcrawford]

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

[timmydcrawford]

Removed errant extra wp_enque_script in 40866.2.diff​

[westonruter]

Tweak comments; condense conditional

[jnylen0]

Fix the test suite; use set_url_scheme; tweak comments

[jnylen0]

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.

[westonruter]

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.