WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#28476 closed defect (bug) (wontfix)

YouTube Embed Breaks When Flash isn't Enabled

Reported by: fatmedia Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9.1
Component: Embeds Keywords: needs-patch
Focuses: javascript Cc:

Description

This is my first time ever submitting a ticket on Trac, so please forgive me if I'm doing anything wrong or formatting my ticket incorrectly.

Ever since the recently added support for the mediaelement.js (ticket:24764), any YouTube videos embeded using a shortcode will break on mobile devices or on browsers where Flash isn't enabled or available.

From what I can tell, the reason is somehow related to this:

https://github.com/WordPress/WordPress/blob/master/wp-includes/media.php#L1808

I don't have enough experience to know if this is something that needs to be fixed within WP core or if it's something that mediaelement.js needs to improve.

Change History (8)

#1 follow-up: @wonderboymusic
6 years ago

  • Focuses javascript added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.0

Thanks for the report - not sure where this should be fixed, but I know that YouTube will use HTML5 when possible. I'll do some investigating.

#2 @johnbillion
6 years ago

  • Component changed from Media to Embeds

#3 in reply to: ↑ 1 @fatmedia
6 years ago

Replying to wonderboymusic:

Thanks for the report - not sure where this should be fixed, but I know that YouTube will use HTML5 when possible. I'll do some investigating.

I tracked it down a little bit when I found it and saw that it's related to the query strings being added to the URL by WP. Depending on which YouTube URL format you use on the embed, the video will function sometimes but the player is always at least somewhat broken when the HTML5 fallback is being used.

I was able to kind-of get the video to work by doing this, but it's nowhere near a solution:

https://gist.github.com/wpbacon/be60e29ece5ac0fae8a4

Hope that's helpful in some way. :)

#4 follow-up: @salcode
6 years ago

Looking into this with flash disabled using

[embed]https://www.youtube.com/watch?v=B7UmUX68KtE[/embed]

results in

Chrome 35 on a Mac: displays properly
Firefox 29.0.1 on a Mac: no video, a black box is displayed

#5 in reply to: ↑ 4 @fatmedia
6 years ago

Replying to salcode:

Looking into this with flash disabled using

[embed]https://www.youtube.com/watch?v=B7UmUX68KtE[/embed]

results in

Chrome 35 on a Mac: displays properly
Firefox 29.0.1 on a Mac: no video, a black box is displayed

The testing I did was using:

http://codex.wordpress.org/Video_Shortcode
http://codex.wordpress.org/Function_Reference/wp_video_shortcode

I'm not sure how that impacts things, but I don't think I ever tested the standard embed shortcode. It was broken on both Chrome and Firefox when I tested.

#6 @pauldewouters
6 years ago

Could not reproduce on Firefox 30 on a Mac with the shockwave flash plugin disabled. It falls back to HTML5 successfully.

EDIT: Actually, I can confirm this is happening. With or without the closing [/video] tag. The player elements are all out of place and videos don't play in Firefox 30. Sorry for the confusion

Last edited 6 years ago by pauldewouters (previous) (diff)

#7 @helen
6 years ago

  • Keywords reporter-feedback added

There's been a lot of possibly-related work in #28905 - still an issue?

#8 @wonderboymusic
6 years ago

  • Keywords reporter-feedback removed
  • Milestone 4.0 deleted
  • Resolution set to wontfix
  • Status changed from new to closed

YouTube loads via Flash when you use the [video] shortcode. There's no way around it. If your goal is to show YouTube, regardless of the Flash dependency, use the [embed] shortcode or oEmbed by just pasting the URL.

Here is the relevant code in MEjs that loads YouTube:
https://github.com/johndyer/mediaelement/blob/master/src/flash/htmlelements/YouTubeElement.as

YouTube in MEjs is an enhancement and doesn't have any mechanism to fallback to HTML5 (yet?).

Note: See TracTickets for help on using tickets.