I recently encountered, and hacked together a fix for, a bug in Firefox where a video element appeared and played fine, until I clicked the fullscreen button, then the audio continued to play, but the video completely disappeared. The solution vexed me a bit, so when I found it, I thought I should share it…

tl;dr

The problem is only Firefox, and it only happens if the video being sent to fullscreen is inside a parent element with !important added to a CSS transform. Without !important, the video plays fine in fullscreen-mode, but unfortunately I need it when not in fullscreen-mode. Finding a way to do both was my challenge… ;-)

Demo

The Situation

My original video element opens inside of an overlay and has a good bit of presentational CSS, but I found that only the following HTML:

<div>
  <video controls>
    <source ... />
    ...
  </video>
</div>

and the following CSS:

div {
  transform: translate(0)!important;
}

are required to reproduce this issue…

Again, the video works fine, until a user clicks the fullscreen button, then the audio keeps playing, but the video disappears…

The Fix

This involves a good-old-fashioned JS/CSS two-step! Well, I could have done it solely via the JS file, but I want to keep things clean, so I use the following JS to toggle a class on the video wrapper (targeting only Firefox, since it’s the only browser I’ve found with this issue).

I added this JS:

document.addEventListener('mozfullscreenchange', function () {
  $('div').toggleClass('mozFullscreenFix');
}, false);

and this CSS:

.mozFullscreenFix {
  transform: none!important;
}

and suddenly the video appears, and plays, just fine, even in fullscreen-mode…

The Conclusion

So, there it is, pretty simple, but since it took me a few minutes of scrounging around and trying other things that didn’t work, I thought I’d share it.

And like a good citizen, I filed a bug with Mozilla, so hopefully this issue will be resolved in some future release.

In the mean time, happy fullscreen videoing,
Atg

Top⇪