Firefox have issue with responsive width #920

Closed
KaptinLin opened this Issue Jun 25, 2013 · 3 comments

Comments

Projects
None yet
3 participants
Contributor

KaptinLin commented Jun 25, 2013

Meidaelement don't update the player width and height when resize the viewport in firefox.

The styesheet is set up already.

video {
    max-width: 100%;
}

It works perfect with chrome. but not in firefox.

Has this not been fixed yet? This is a serious bug since Mediaelement is used in the Wordpress core and therefore does not set the width of videos properly on Firefox, without any way to actually fix it for casual users who don't know CSS or JS.

Right now in Wordpress I drag a video in and upload it normally without any video related plugins. Once placed into a blog post, it gets "Width: 100%" in Chrome, but in Firefox it gets "Width: 1280px".

Any updates?

This problem still exists in Firefox 38 / mejs 2.17.0.
Firefox always returns the calculated value of max-width in px, so the check for "100% mode" fails (mep-player.js#L813).

I see 2 possible solutions:

  1. a different check that correctly gets the value as a % in Firefox
  2. an extra init option to skip the check and force 100% mode

An extra option would be a more foolproof method as it wouldn't matter if browser implementations changed in the future.

@joemcgill joemcgill added a commit to joemcgill/mediaelement that referenced this issue Jul 4, 2015

@joemcgill joemcgill Improved max-width test for MediaElementPlayer.setPlayerSize
The test for max-width in MediaElementPlayer.setPlayerSize only returns true if max-width is set to 100%. Firefox returns the calculated value instead, so this check always fails in FF. A different, solution is to simply check if a max-width is set and if that value is different than the width of the video, in which case it should probably be resized. This should resolve #920.
4cdfb89

johndyer closed this in #1531 Jul 31, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment