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

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

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

http://www.mensdiscipleshipnetwork.com

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

Ответы

Ответ 1

Похоже, вам нужно добавить ?wmode=transparent в URL-адрес YouTube embed iframe src. Например:

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

Ответ 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");
        });
    });

Ответ 3

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

Ответ 4

Если вы используете 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'
            }
        });