Treści wideo z YouTube obejmujące rozwijane menu CSS w IE <9

Question

Stworzyłem menu rozwijane przy użyciu CSS i mam film na YouTube umieszczony w pudełku tuż pod moim paskiem nawigacji. Podczas korzystania z IE 8 menu rozwijane znajdują się poza filmem na YouTube, pomimo tego, że div z paskiem nawigacji ma wyższą wartość z-index niż div z filmem na YouTube. Problem nie występuje w przeglądarkach Firefox, Safari ani IE9.

Widać problem wchodząc na stronę internetową:

http://www.mensdiscipleshipnetwork.com

Dzięki za pomoc.

Answer 1

Wygląda na to, że musisz dodać adres URL ?wmode=transparent do adresu URL umieszczającego w serwisie YouTube iframe src. Tak:

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

Answer 2

Możesz dodać ten parametr automatycznie do wszystkich iframe src tak:

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

Jeśli używasz osadzić, wmode musi mieć atrybut zamiast części URL wmode="transparent"

Answer 4

Jeśli używasz API iframe można go dodać tak (uwaga ostatniego param w playerVars Object):

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