WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#29223 closed defect (bug) (worksforme)

Video Shortcode with Youtube source broken in some browsers

Reported by: brokenflipside Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9.2
Component: Media Keywords: needs-patch reporter-feedback
Focuses: ui, javascript, template Cc:

Description

The video player layout is broken when using the video shortcode with youtube as the source. I have tested this on a default twenty fourteen theme with no plugins installed.

You can see a full break down here: http://wp.me/p4VyKf-C

Change History (10)

#1 @ocean90
6 years ago

  • Keywords reporter-feedback added

Hello brokenflipside , thanks for the report.

There are two related tickets, #28190 and #29110. Both are fixed in 4.0 so I tried your video with current beta and I can't reproduce the issue as visible on your site anymore. Can you confirm this?

#2 @brokenflipside
6 years ago

Still a bit buggy, but better.

http://marcgratch.com/youtube-video-shortcode-css/#bleedingNightlies I have provided updated screenshots when running 4.0.

#3 @Jayjdk
6 years ago

I can reproduce this in Safari and Firefox on Mac (haven't tried Windows). It works in Chrome. Tested on latest trunk (revision 29351).

And it's not just in TwentyFourteen. Every theme I've tried has the same problem.

Screenshots:

The console in Firefox gives these errors:

  • Specified "type" attribute of "video/youtube" is not supported. Load of media resource https://www.youtube.com/watch?v=[...] failed.
  • All candidate resources failed to load. Media load paused.

The console in Safari gives this error:

  • Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://theme.dev". The frame requesting access has a protocol of "about", the frame being accessed has a protocol of "http". Protocols must match.
Last edited 6 years ago by Jayjdk (previous) (diff)

#4 @wonderboymusic
5 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.1

This should be looked at

#5 @obenland
5 years ago

  • Summary changed from Video Shortcode with Youtube source broken on mobile Twenty Fourteen to Video Shortcode with Youtube source broken in some browsers

#6 @morganestes
5 years ago

  • Keywords reporter-feedback added

I tested today on trunk revision 4.1-alpha-30000-src running Twenty Fourteen in Firefox 33, Safari 8, and Opera 25 on Mac, iOS 8 on iPhone 6 (emulator), and emulated iPhone 4, and emulated Nexus 5 (both emulated in Opera) and couldn't reproduce on any of them. Everything renders as expected and no errors are sent to the console.

I tried with the Youtube video (https://www.youtube.com/watch?feature=player_embedded&v=K7VmOZ4Ppj8) wrapped inside the video shortcode and by itself with oEmbed and couldn't reproduce.

@brokenflipside, can you test again to see if you're still experiencing this issue and maybe I just missed something?

#7 @janhenckens
5 years ago

I was able to reproduce this too a couple of weeks ago, will have another look!

#8 @wonderboymusic
5 years ago

  • Milestone 4.1 deleted
  • Resolution set to worksforme
  • Status changed from new to closed

This appears to be fine since [30082]

#9 @Jayjdk
5 years ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

It's still not working for me. Same errors in Firefox as I got before but a new one in Safari:

https://i.imgur.com/AD7WWWm.png

I've tried both a local and live installation running the latest trunk. Here's a link http://jayj.dk/videobug/

The example on MediaElement's site gives the same errors but works with some display issues (http://mediaelementjs.com/examples/?name=youtube):
http://i.imgur.com/2QxBtNo.png

Last edited 5 years ago by Jayjdk (previous) (diff)

#10 @wonderboymusic
5 years ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

These work for me... if there is a brower security setting issue, that needs to be addressed upstream:
https://github.com/johndyer/mediaelement

Note: See TracTickets for help on using tickets.