How to display custom video controls even in fullscreen
<p><strong>Update:</strong> Can't see to get things working in Firefox : (</p>

<p>How can I display custom video controls when the in fullscreen mode in modern browsers?</p>

<p>They disappear as soon as I go fullscreen. I'd like them to be available, and then I'll write some JavaScript to hide them on inactivity and show them once someone wiggles their mouse around.</p>

<p>HTML: </p>

<pre><code>&lt;video#video src="vid.mp4" preload poster="/images/poster.jpg"&gt;
  &lt;iframe src="https://youtube.com/embed/id" frameborder="0" allowfullscreen&gt;
&lt;/video&gt;
</code></pre>

<p>JS:</p>

<pre><code>var bigPlayButton = document.getElementById('big-play-button')
var video = document.getElementById('video')
var playPauseButton = document.getElementById('play-pause')
var fullscreen = document.getElementById('fullscreen')

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

fullscreen.addEventListener('click', function (event) {
  if (!video.classList.contains('fullscreen')) {
    video.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}, false)

// Detect FullScreen changes and adjust button
document.addEventListener('fullscreenchange', function (event) {
  if (document.fullscreenElement) {
    fullscreen.children[0].src = '/images/nofullscreen.svg'
    video.classList.add('fullscreen')
  } else {
    fullscreen.children[0].src = '/images/fullscreen.svg'
    video.classList.remove('fullscreen')
  }
}, false)
</code></pre>

<p>CSS</p>

<pre><code>video::-webkit-media-controls {
  display: none !important;
}
#custom-video-controls {
  z-index: 2147483648;
}
</code></pre>

<p>I'm using this polyfill: <a href="https://github.com/neovov/Fullscreen-API-Polyfill" rel="noreferrer">https://github.com/neovov/Fullscreen-API-Polyfill</a> </p>