superponer div opaco sobre iframe de youtube
¿Cómo puedo superponer un div con opacidad semitransparente sobre un video incrustado en iframe de YouTube?
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
editar (se agregó más aclaración):
HTML5 se está acercando a nosotros, con cada vez más dispositivos que lo usan en lugar de flash, lo que complica la incrustación de videos de youtube, afortunadamente youtube proporciona un iFrame incrustable especial que maneja todos los problemas de compatibilidad de incrustación de videos, pero Ahora el método que funcionaba anteriormente de superponer un objeto de video con un div semitransparente ya no es válido, ahora no puedo agregar un <param name="wmode" value="transparent">al objeto porque ahora es un iFrame, entonces, ¿cómo agrego un div opaco encima? ¿El vídeo incrustado en iframe?
Información del sitio oficial de Adobe sobre este tema.
El problema es cuando insertas un enlace de YouTube:
https://www.youtube.com/embed/kRvL6K8SEgY
en un iFrame, el modo w predeterminado es una ventana, lo que esencialmente le da un índice z mayor que todo lo demás y se superpondrá a cualquier cosa.
Intente agregar este parámetro GET a su URL:
wmode=opaco
al igual que:
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
Asegúrese de que sea el primer parámetro de la URL. Otros parámetros deben ir después
En la etiqueta iframe:
Ejemplo:
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
Tenga en cuenta que la solución wmode=transparent solo funciona si es la primera vez.
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0
No
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
