Firefox fullscreen video append DOM elements

Question

no matter how I put elements in DOM as an overlay on html5 video (statically or dynamically), those elements in Firefox are not visible, although the z-index is set to 21474

Answer 1

To Display Overlay Element, instead of making video fullscreen, make parent of Video Element Fullscreen.

See Example Here - https://jsfiddle.net/tv1981/tm069z9c/1/

In following structure, I am making 'container' fullscreen

  

    Fullscreen
  
  

    Logo Overlay
  
  
  

    This is Test Overlay for Video
  

JavaScript

fs.addEventListener('click', goFullScreen);

function goFullScreen() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
    document.webkitFullscreenElement || document.msFullscreenElement;
  if (fullscreenElement) {
    exitFullscreen();
  } else {
    launchIntoFullscreen(document.getElementById('container'));
  }
}

This is working in Chrome Version 60.0.3112.101 (Official Build) (64-bit), FireFox Developer Edition 56.0b5 (64-bit)