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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With