WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#27211 closed defect (bug) (worksforme)

Incorrect video dimensions in Firefox and missing controls in Chrome

Reported by: wonderboymusic Owned by:
Milestone: Priority: high
Severity: major Version: 3.9
Component: Media Keywords:
Focuses: ui Cc:

Description

Paste this into your post and then fire up Firefox:

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

Also, in video playlists: I am trying everything to render videos in the proper aspect ratio. Firefox + MediaElement make the videos too tall.

This was happening in Chrome in 2011 and 2010 themes until I added the following rules from 2014 into wp-mediaelement.css:

.wp-playlist audio,
.wp-playlist video {
	display: inline-block;
	max-width: 100%;
}

Attaching a screenshot of the chromeless YouTube vid.

Attachments (4)

Screen Shot 2014-02-25 at 3.23.09 PM.png (135.9 KB) - added by wonderboymusic 6 years ago.
Screen Shot 2014-02-25 at 3.24.44 PM.png (190.9 KB) - added by wonderboymusic 6 years ago.
Video is too tall
27211.patch (461 bytes) - added by eightface 6 years ago.
Initial fix for black bars and play button position
27211.2.patch (491 bytes) - added by eightface 6 years ago.
New patch, forgot to svn up before I started, old patch seemed to fail for me

Download all attachments as: .zip

Change History (10)

#1 @eightface
6 years ago

I've done some poking around with the first embed you posted (haven't tried the playlist yet). I also get the same bugs testing in Safari without Flash. I think there's a disconnect between the original dimensions, the dimensions spit out by WordPress and how mediaelement.js is working.

The original video is 640x360. The content width for Twenty Thirteen is 604px, which should give a corresponding height of 339px. The wp embed output before mediaelement has its way has width=604 and height=360 as parameters... which seems to be what gets used in Firefox and Safari (604x360), hence the black bars. Don't know why the play button is being weird, but imagine it's some sort of similar issue with the dimensions.

Would the approach here be to make sure that original video embed output is getting the appropriate width/height, or trying to fix with css/js?

Edit: Was using Twenty Thirteen, not Twenty Fourteen

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

@eightface
6 years ago

Initial fix for black bars and play button position

#2 @eightface
6 years ago

I figured changing the embed output is probably a bad idea given variable video heights.

I have an initial CSS patch that seems to get rid of the black bars and positions the play button properly in Firefox and Safari. Also tested it in Chrome, but haven't tried any IE variants yet. The player controls still don't hide in FF/Saf, that may need a better set of javascript eyes.

@eightface
6 years ago

New patch, forgot to svn up before I started, old patch seemed to fail for me

#3 @wonderboymusic
6 years ago

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

The YouTube issue has gone away. The problem with the dimensions is based on the ID3 tags being off-ish. However, there isn't really anything we can do to get Firefox to resize once we pass the wrong dimensions to Flash.

#4 @bpetty
6 years ago

  • Summary changed from Firefox + Videos = Sad to Incorrect video dimensions in Firefox and missing controls in Chrome

#5 @SergeyBiryukov
6 years ago

  • Keywords needs-patch good-first-bug removed
  • Resolution changed from fixed to worksforme

Marking as worksforme, as there were no commits here.

#6 @SergeyBiryukov
5 years ago

  • Milestone 3.9 deleted
Note: See TracTickets for help on using tickets.