15

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)

Dalibor
  • 1,430
  • 18
  • 42
  • The alternative solution I have in mind would be to "fake fullscreen": display video in an overlay of 100% of screen, and then place elements on top of it, but I would prefer the native fullscreen solution. – Dalibor Aug 24 '17 at 12:39

1 Answers1

18

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)

Tushar Vaghela
  • 1,203
  • 1
  • 17
  • 25
  • Thank you, I'll look into it and get back to you – Dalibor Aug 25 '17 at 12:37
  • Sure, This is actual Native Fullscreen and works with Mobile as well. This should serve your purpose. – Tushar Vaghela Aug 28 '17 at 04:32
  • OK, since you've demonstrated it also in JSFiddle, I won't wait till I implement it, you receive the bounty! Thanks – Dalibor Aug 30 '17 at 10:30
  • Ping here If you encounter any issue, I'll surely try to help you with that. I have used this approach for video player and it's working for all Major Browsers and latest Mobile Browsers as well. – Tushar Vaghela Aug 31 '17 at 03:40
  • Are there any way to make this work on phone browsers? tried with an iPhone. Did not work. – Fahad S. Ali Jun 04 '20 at 16:47
  • @Fahad iOS Safari doesn't support fullscreen on iPhone, only iPad and only partially: https://caniuse.com/?search=requestFullscreen – smartblonde Jul 25 '21 at 17:03