Firefox fullscreen video append DOM elements

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 2147483647, opacity 1 and display block.

See 2 similar answers, working in Chrome, but not in FF:

Overlay on HTML5 Fullscreen Video

Displaying elements other than fullscreen element (HTML5 fullscreen API)

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

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

In following structure, I am making 'container' fullscreen

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay muted>
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> Your browser does not support the video tag.
  </video>
  <div class='footer'>
    This is Test Overlay for Video
  </div>
</div>

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)