Contenido de video de YouTube que cubre los menús desplegables de CSS en IE <9

Question

He creado menús desplegables usando CSS y tengo un video de YouTube colocado en un cuadro justo debajo de mi barra de navegación. Al utilizar IE 8, los menús desplegables se quedan atrás del video de YouTube, a pesar de que el div con la barra de navegación tiene un índice Z más alto que el div con el video de YouTube. El problema no existe en Firefox, Safari o IE9.

se puede ver el problema, vaya al sitio web:

http://www.mensdiscipleshipnetwork.com

Gracias por la ayuda.

Answer 1

Parece que necesita agregar ?wmode=transparent a la URL de inserción de YouTube iframe src. De este modo:

<iframe width="632" height="390" src="http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent" frameborder="0" allowfullscreen></iframe> 

Answer 2

Usted puede agregar el parámetro de forma automática a todos los iframes src así:

$(document).ready(function() 
    { 
     $('iframe').each(function() 
     { 
       var url = $(this).attr("src"); 
       var char = "?"; 
       if(url.indexOf("?") != -1) 
         var char = "&"; 

       $(this).attr("src",url+char+"wmode=transparent"); 
     }); 
    }); 

Answer 3

Si está utilizando incrustar, embed tiene que ser un atributo en lugar de parte de la URL wmode="transparent"

Answer 4

Si está utilizando la API de marco flotante puede agregar como este (tenga en cuenta el último parámetro en los playerVars Object):

player = new YT.Player(playerID, 
     { 
      width: '100%', 
      height: '100%', 
      videoId: vidID, 
      playerVars: { 
       controls: 2, 
       autohide: 1, 
       showinfo: 0, 
       modestbranding: 1, 
       wmode: 'transparent' 
      } 
     });