Fix disappearing fullscreen video in Firefox

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…


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… ;-)


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:

  <video controls>
    <source ... />

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 () {
}, 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,

2 Responses to Fix disappearing fullscreen video in Firefox

  1. aarontgrogg says:

    And that, my friends, is how we make the Internet a better place!

    Bug found, solution found, bug reported, bug resolved

    Nicely done, good people at Mozilla!!

  2. Michelle says:

    Or You can just turn off Hardware acceleration .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.