Este va a ser rápido y algo técnico, pero me costo bastante descubrir el problema y creo que merece la pena dejarlo por escrito. Dedicado a aquellos que se aventuren a modificar el código CSS de vuestras páginas web, o más normalmente el de vuestros temas de wordpress.
El problema:
Sucede en Internet Explorer 8 ó 9. Tenemos un vídeo de youtube en una página, normalmente en la portada, y al bajar el scroll, el vídeo de youtube debería quedar oculto con el texto, y sin embargo flota por encima haciendo complicada la navegación.
En condiciones normales, esto se soluciona agregando una orden z-index al código CSS de la portada. Concretamente al div que contiene el iframe del vídeo de youtube. (que levante la patita el que no haya entendido nada de la última frase, ya avisé que este artículo era algo más tecnico.)
z-index:-999 !important;
En un navegador bueno (chrome, firefox, etc) con esto vale, pero en el Internet Explorer lo ignora completamente.
La solución:
Pues bien, el problema se soluciona de la forma más simple. Como bien indican en este enlace, hay que añadir a nuestro código iframe del vídeo de youtube lo siguiente:
[box type=»info»]Nota: el código iframe sale de la página del vídeo de youtube, si no sabes como conseguirlo deja un comentario.[/box]
A la URL del vídeo le añadiremos esto al final:
?wmode=transparent
Y al código del iframe le añadiremos este atributo también al final:
wmode="Opaque"
Por tanto, un vídeo cualquiera que tuviera esta forma:
< iframe src="https://www.youtube.com/embed/hLI1sZUN_LU" height="315" width="560" allowfullscreen="" frameborder="0">
Se convierte en esta otra:
< iframe src="https://www.youtube.com/embed/hLI1sZUN_LU?wmode=transparent" height="315" width="560" allowfullscreen="" frameborder="0">
Y problema solucionado.