Contenuti video di YouTube che coprono i menu a discesa CSS in IE <9

Question

Ho creato menu a discesa utilizzando CSS e ho inserito un video di YouTube in una casella appena sotto la barra di navigazione. Quando si utilizza IE 8, i menu a discesa si nascondono dietro il video di YouTube, nonostante il div con la barra di navigazione abbia uno z-index più alto rispetto al div con il video di YouTube. Il problema non esiste in Firefox, Safari o IE9.

si può vedere il problema andando sul sito web:

http://www.mensdiscipleshipnetwork.com

Grazie per l'aiuto.

Answer 1

Sembra che sia necessario aggiungere ?wmode=transparent all'URL di YouTube iframe src. In questo modo:

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

Answer 2

È possibile aggiungere il parametro automaticamente a tutti gli iframe src in questo modo:

$(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

Se si utilizza incorporare, wmode deve essere un attributo piuttosto che parte dell'URL wmode="transparent"

Answer 4

Se si utilizza l'API iframe è possibile aggiungere in questo modo (si noti l'ultimo param nei playerVars oggetto):

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