Vídeo se superpone a un menú.

En ocasiones queremos incluir un vídeo de Youtube en nuestras web. Copiamos el código dentro del html y aparece el problema: el vídeo se superpone a elementos fijos, en este caso un menú, que deben quedar por encima del contenido cuando se navega por la página.

Problema de superposición de video a menú.

Problema de superposición de vídeo a menú.

Algunas posibles soluciones NO válidas:

  • Usar el parámetro z-index. Sólo funciona correctamente en Firefox. Aun usándolo en elementos posicionados como relative, al ser un iframe falla en Chrome y IE.
  • Incluir dentro del código HTML del objeto incrustado  <param name="wmode" value="transparent" />. Pero como en este caso utilizamos un iframe para incrustar el vídeo de Youtube, el parámetro no funciona y por tanto la solución tampoco es válida.

Solución: El vídeo bajo el menú.

Sin tener que modificar CSS y apenas el HTML, añadimos ?wmode=transparent al link del vídeo por lo que quedaría así:

http://www.youtube.com/embed/ZAS2JUtBQ_M?wmode=transparent

Y el resultado en la web:

Superposición de video a menú solucionado.

Superposición de vídeo a menú solucionado.