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…

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

2 Responses to Fix disappearing fullscreen video in Firefox

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.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)