Video toàn màn hình của Firefox nối ​​thêm các phần tử DOM

Question

cho dù tôi đặt các phần tử trong DOM dưới dạng lớp phủ trên video html5 (tĩnh hoặc động), các phần tử trong Firefox không hiển thị, mặc dù chỉ mục z được đặt thành 2147483647, độ mờ 1 và khối hiển thị.

Xem 2 câu trả lời tương tự, làm việc trong Chrome, nhưng không phải trong FF:

Overlay on HTML5 Fullscreen Video

Displaying elements other than fullscreen element (HTML5 fullscreen API)

Answer 1

Để hiển thị Overlay Element, thay vì làm toàn màn hình video, làm cho cha mẹ của Video Yếu tố toàn màn hình.

xem ví dụ ở đây - https://jsfiddle.net/tv1981/tm069z9c/1/

Trong cấu trúc sau đây, tôi đang làm cho '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> 
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.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')); 
    } 
} 

này đang làm việc trong Chrome Version 60.0.3112.101 (Official Bản dựng) (64 bit), Phiên bản dành cho nhà phát triển FireFox 56.0b5 (64 bit)