mediaelement.js volume control messed when increasing browser zoom

Question

Media Element 2.12.0

This happens only in FF and Chrome (and not in IE or Opera). After navigating to site content which has media element player, even to Media Element front page http://mediaelementjs.com/ there is a player.

When the browser zoom is set to Normal (usually by pressing Ctrl+0) it looks OK.

When the zoom is increased (by pressing Ctrl++ or Ctrl+ scrolling mouse wheel) then the volume control is placed below the whole element.

The above screenshot was made at zoom one level larger from normal.

Is there a method to make it look good in all browser zooms?

Answer 1

It seems that the children of div.mejs-controls overflowed when scaling the page, but it isn't a CSS case. The size of div.mejs-time-rail is generated by Javascript dynamically. (https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845)

I found a trick that can simply solve the problem, which is to decrease the width of div.mejs-time-rail by 1px.

So here I got a quick fix. In mep-player.js, line 845(https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845), modify following

total.width(railWidth - (total.outerWidth(true) - total.width()));

to

total.width(railWidth - (total.outerWidth(true) - total.width()) - 1);

Answer 2

I fixed it in the file mediaelement-and-player.js by altering the following lines

line 2705 insert **- 40**
// fit the rail into the remaining space
railWidth = t.controls.width() - usedWidth - 40 - (rail.outerWidth(true) - rail.width());

line 2713 change to
total.width(railWidth - (total.outerWidth(true) - total.width()) - 5);

Hope this helps.

Answer 3

you have to change in your css and set the width like

<div id="mep_0" class="mejs-container svg mejs-audio" style="width: 440px; height: 30px;">
<div class="mejs-inner" style="width:100%;">
<div class="mejs-mediaelement">

and check. hope this will help you.

Answer 4

I've faced the same issue. It seems that ChiChou's answer was finally used. If you update mediaElement at least to the version of the 31/08/2014 (2.15.1). You should be fine! https://github.com/johndyer/mediaelement/issues/483