Наложение div на HTML 5 видео в firefox не работает?

Question

В основном я имею:

.pofvv{ 
 
\t  position:relative; 
 
\t  width:100%; 
 
    \t height:100%; 
 
\t  background:black; 
 
    \t z-index:1; 
 
    } 
 
    .overlay{ 
 
\t  position:absolute; 
 
\t  height:60px; 
 
\t  width:100%; 
 
\t  bottom:0px; 
 
\t  background: white; 
 
    \t \t z-index:2147483647; 
 
    }

<video class="pofvv" id="pofvv"> 
 
\t \t <source src="wajid.MP4" type="video/mp4"> 
 
\t </video> 
 
\t <div class="overlay"></div>

Как Вы можете видеть, что я имею максимальную z-index на моем overlay контейнере, который работает на хроме и оперы ли видео в полноэкранном режиме или нет. Проблема заключается в том, что firefox, который, если видео попал в полноэкранный режим, мой элемент overlay идет ниже видео. Поэтому я был бы очень признателен, если бы кто-нибудь мог сказать, в чем причина и как это исправить.

Все мои Regards (». *)

Answer 1

проверить этот фрагмент кода.

.pofvv{ 
 
\t  position:relative; 
 
\t  width:100%; 
 
    \t height:100%; 
 
\t  background:black; 
 
    \t z-index:1; 
 
    } 
 
    .overlay{ 
 
\t  position:absolute; 
 
\t  height:60px; 
 
\t  width:100%; 
 
\t  bottom:0px; 
 
\t  background: white; 
 
    \t \t z-index:2147483647; 
 
     top:50%; 
 
    }

<video class="pofvv" id="pofvv"> 
 
\t \t <source src="wajid.MP4" type="video/mp4"> 
 
\t </video> 
 
<div class="overlay"></div>