Problemas con incrustaciones de videos de YouTube y índice z

Al incrustar un video de YouTube usando un iframe debajo de un menú de navegación desplegable de varios niveles, puede encontrar Problemas donde el menú desplegable aparece detrás del video en Chrome e Internet Explorer. Al pasar el cursor sobre un elemento de navegación principal, el menú desplegable debería aparecer encima del video en todos los navegadores.

Pregunta 1: ¿Por qué aparece el menú desplegable detrás del video de YouTube en Chrome e IE9?

Este problema está relacionado con el vídeo de YouTube en sí, no con el iframe. Las incrustaciones de YouTube incluyen CSS interno que anula otras configuraciones de CSS, incluidos los valores del índice z.

Pregunta 2: ¿Por qué configurar el índice z:-999 !important; en el iframe todavía causa el problema?

El CSS predominante en el código de inserción de YouTube tiene prioridad sobre cualquier configuración de índice z que aplique al iframe.

Solución:

Para solucionar este problema, agregue el siguiente parámetro al video incrustado URL:

&wmode=Opaque

Esta configuración permite que el vídeo se mezcle con el fondo, lo que permite que otros elementos de la página aparezcan encima.

Notas adicionales:

• También puede usar el parámetro wmode=transparent en lugar de Opaque, aunque esto puede generar problemas de transparencia en algunos navegadores.
• Como alternativa, puedes usar jQuery para modificar la URL de todos los iframes en tu página antes de que se carguen, como se muestra en el siguiente fragmento de código:

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});