johndyer/mediaelement — Issue #309: HTML5 player control layout issues in lightbox implementation (hidden container div)
Author: andjules
Created: 2011-11-21 19:26:07+00:00
State: open

Seems to me video-in-a-lightbox is a pretty popular pattern these days.

The controls (HTML5, not flash) don't seem to layout properly when the lightbox (colorbox in my case) first opens. Once the control bar auto-hides, if I roll back over it, the controls look good (although in Safari, the volume control is still open/expanded until I actually rollover it... not in chrome).
http://scarfe.ca/files/mediaelement-in-colorbox.jpg

I assume this results from some of the CSS being built dynamically, and querying container width, etc. from javascript?... if the video is hidden when the page loads (typical for an inline lightbox implementation), then it presumably doesn't have a width (maybe I should switch to visibility:hidden vs display:none?).

Anyhow, wondering if there is something I can call (js) when the lightbox opens to correct the layout (or force the controls to hide initially)?

As noted on the image, there is another problem in Safari: when play() is triggered from javascript, the big play-overlay-icon doesn't auto-disappear.

Very grateful for mediaelementjs... it's a nice implementation. Thank you.