<!doctype html>
<html lang="en-US">
<meta charset="UTF-8">
<title>Firefox Test Page</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<link rel="profile" href="http://gmpg.org/xfn/11">
div {
transform: translate(0);
div.important {
transform: translate(0)!important;
video {
width: 100%;
max-width: 100%;
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1055977">Bug 1055977</a> - Fullscreen video disappears when using CSS transform on parent element
<li>Click Play</li>
<li>Click Fullscreen</li>
<li>Video should switch to fullscreen-mode and work fine</li>
<li>Exit fullscreen-mode</li>
<li><a href="#">Toggle the <code>!important</code> on the <code>div</code>'s <code>transform</code></a></li>
<li>Click the Fullscreen button</li>
<li>Audio should continue, but the video should disappear</li>
<video controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
var div = document.querySelector('div'),
toggle = document.querySelector('li > a');
toggle.addEventListener('click', function(e){
if (div.className.match('important')) {
div.className = '';
} else {
div.className = 'important';
}, false);