title: How to display custom video controls even in fullscreen
body: <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>