Player full screen button displays on new line on Google Nexus 7 tablet #899

Closed
henrywright opened this Issue Jun 4, 2013 · 3 comments

Comments

Projects
None yet
4 participants

The full screen button displays on a new line on my Google Nexus 7 tablet. It is almost as if there isn't enough room for all of the control buttons on one line so the last button (full screen) goes on to the next line.

The problem doesn't exist on my laptop (Firefox, Chrome, IE) or on the iPad

GuLinux commented Jun 14, 2013

Same thing here, Galaxy S3 with google chrome.
It is visible even on the "demo" video on mediaelement.js homepage.
It does work "fine" on the default samsung browser (I have another issue actually, but it might be my fault, I still have to figure out why).

I'm experiencing this in Chrome/28.0.1500.64 on the Samsung Galaxy Tab 2 (GT-P5113).

I attempted to fix this using a CSS rule targeted at the Samsung Galaxy Tab 2 (see end of post below), but even though I use Chrome Developer tools to change the size of div.mejs-fullscreen-button to 21px and can see the full screen button pop back into place, upon reloading the page with the new CSS rule, the full screen button is still on the 2nd line.

It seems like we need the div.mejs-time-rail element to be a few pixels smaller. I hope I can find where it is being set in the Javascript and make it a little smaller.

CSS rule that doesn't work because it appears div.mejs-time-rail increases in size and bumps full screen button off again:
@media (max-device-width: 1280px) and (orientation: landscape) {
.mejs-container .mejs-controls div.mejs-fullscreen-button { width: 21px; }
}

farneman added a commit to farneman/mediaelement that referenced this issue Oct 4, 2013

I know this is old, but i found a (messy but working) "fix" for it.

Try enabling a control you dont need (maybe 'loop' or 'sourcechooser') at the very end.
Find out what its inner <button> is, and display: none !important it in your CSS

In my case i didnt need the 'fullscreen' button:

    features: ['playpause', 'stop', 'current','progress','duration','tracks','volume', 'sourcechooser', 'fullscreen']

and in CSS:

.mejs-fullscreen-button button{
    display: none !important;
}

I admit it isn't very elegant, but it is the only "fix" I could find

Hope this helps future people with the issue ;)

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