Sobrepor div a um <iframe> em modo fullscreen
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>Discussão (3)
Carregando comentários...