Видеоконтент YouTube с раскрывающимися меню CSS в IE <9

Question

Я создал выпадающие меню с использованием CSS, и у меня есть видео YouTube, помещенное в поле чуть ниже моей навигационной панели. При использовании IE 8 выпадающие меню отстают от видео YouTube, несмотря на то, что div с навигационной панелью имеет более высокий z-индекс, чем div с видео YouTube. Проблема не существует в Firefox, Safari или IE9.

Вы можете увидеть проблему, перейдя на веб-сайт:

http://www.mensdiscipleshipnetwork.com

Спасибо за помощь.

Answer 1

Похоже, вам нужно добавить ?wmode=transparent для вставки YouTube iframe src URL.Вот так:

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

Answer 2

Вы можете автоматически добавить этот параметр во все iframes src следующим образом:

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

Если вы используете API iframe, вы можете добавить его следующим образом (обратите внимание на последний параметр в объекте playerVars):

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

Answer 4

Если вы используете embed , wmode должен быть атрибутом, а не частью URL wmode="transparent"