Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Um exemplo, no Google Chrome o "z-index:2147483647" consegue fazer a div se
sobrepor ao iframe sem problemas, já nos outros navegadores não estou conseguindo
fazer** <div id"controls">** se sobrepor ao **iframe**, alguém conhece alguma forma de sobrepor
o** iframe** ou tem alguma ideia do que eu estou fazendo de errado?
Segue o exemplo: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#contarner_video{
padding-bottom:56.25%;
height:0;
border-radius:inherit;
overflow:hidden;
z-index:0;
}
#contarner_video iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
#ytplayer{
display:block;
}
#controls{
width:100%;
height:30px;
background-color:#000;
opacity:0.9;
position:absolute;
top:0;
left:0;
z-index:2147483647;
}
#controls span{
line-height:30px;
padding:0 20px;
color:#fff;
float:right;
}
</style>
</head>
<body>
<div id="contarner_video">
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/M7lc1UVf-VE?controls=0&enablejsapi=1&fs=0&rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
<div id="controls">
<span>FullScreen</span>
</div>
</div>
<script>
$('#controls span').on('click', function(){
var e = document.getElementById("ytplayer");
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
}
});
</script>
</body>
</html>Olá Joao_Lucaas, obrigado por me responder!
Acho que acabei me expressando mal, não citei que no exemplo acima
o vídeo esta configurado para ocupar 100% da tela mas não esta
em fullscreen, tem um botão escrito FullScreen no canto superior
direito que ativa o fullscreen.
Caso não seja esse o caso minhas versões de navegadores são:
-
Google Chrome 64.0.3282.167 (Versão oficial) 32 bits (atualizado) (sem bug)
-
Opera (51.0) 51.0.2830.34 (atualizado) (sem bug)
-
Firefox Quantum 58.0.2 (32-bit) (atualizado) (com bug)
-
Microsoft Edge 20.10240.16384.0 (com bug)
-
Internet Explorer(11) 11.0.10240.16384 (com bug)
Navegadores com bug:
Navegadores sem bug:
O código que eu estou testando é esse mesmo.
Olá Joao_Lucaas, consegui resolver o problema de uma forma
até bem simples, no lugar de chamar o id "ytplayer" do iframe
no script, chamei o** id *"****contarner_video" / "container_video" , *
aplicando fullscreen na div e não no iframe, fazendo com que
a div "controls" ficasse visível no modo fullscreen em todos os
navegadores que testei.
Testei nos seguintes browsers:
-
Google Chrome;
-
Versão 64.0.3282.167 (Versão oficial) 64 bits.
-
Opera;
-
51.0.2830.34 (64 bits);
-
Firefox;
-
58.0.2 (64-bits).
-
Internet Explorer 8.
O único navegador que não fez o vídeo ficar em tela cheia ou a div sobrepor, foi o IE8. No entanto, essa versão é bem velhinha e você não falou nada sobre suporte à esses navegadores.
Vamos fazer o seguinte?
-
Confere se teus navegadores estão atualizados;
-
Se estiverem:
-
Posta o resto código HTML, CSS e JS;
-
Manda print do bug, em cada navegador;
-
Diz quais navegadores e versões você está testando.
-
Se não estiverem:
-
Atualiza;
-
Testa;
-
Se funcionar:
-
Aproveite.
-
Se não funcionar:
-
Posta o resto do código HTML, CSS e JS;
-
Manda print do bug, em cada navegador;
-
Diz quais navegadores e versões você está testando.;