CSS Grid Module
jQuery Selector Order

Video Not Displaying in Firefox

I spent hours today trying to debug a problem in Firefox. I'm working on slideshow of videos using a combination of the Slideshow Manager plugin for MODx which uses Nivo slider. Once you click a graphical play button, a Brightcove Smart Player loads and plays over the slide. For some reason this was working in all browsers except Firefox, which is odd, because generally when you run into one browser that's not rendering CSS and jQuery the way you'd expect, Internet Explorer is the culprit. In this case, all other browsers tested, Chrome, IE, Dolphin, worked, but in Firefox the video was located in the DOM correctly and you could hear it play, but the video and player were not at all visible.

Working with video elements in combination with a slideshow is tricky, though. I suspected I had some issue with opacity, visibility, or z-index. I spent an hour manipulating the CSS of the video and its parent elements to no avail. I started changing the jQuery that was removing and adding the video into the correct place in the DOM when the play button was pushed. But none of this was the culprit.

The problem I discovered, as I dug deeper into the CSS and started removing all styling elements related to the video and it's parent elements until I could get it to display in the offending browser, was the hack I'd used to vertically align the player in the header of the page. 

.element { position: relative; top: 50%; transform: translateY(-50%); }

This is a rather common hack you'll see used on the web, so use with caution. Specificcally, it was the transform property that caused the video not to display in Firefox. I also attempted replacing the transform property with browser specific properties but that did not correct the display issue in Firefox.

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

And yes, the parent element the video was positioned in did have a height property set. 

I've done some searches on the web and have not found anyone else documenting a similar issue. I'm not sure if this is specific to the transform being done on a video element or if it's more specific to my video slideshow implementation.


The comments to this entry are closed.