Видеоконтент YouTube, охватывающий выпадающие меню CSS в IE < 9

#css #youtube

#css #YouTube

Вопрос:

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

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

http://www.mensdiscipleshipnetwork.com

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

Ответ №1:

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

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

1. Это не работает. Я получаю сообщение «Произошла ошибка. Повторите попытку позже. » Сообщение

2. URL должен быть http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent . @sdleihssirhc: Для будущей информации.

3. Спасибо! Это устранило мою проблему. Я действительно ценю помощь новичку.

4. Спасибо! Мне было интересно, почему проблема возникает у некоторых пользователей IE11, но не у всех. Единственное отличие, которое я отметил, заключалось в том, что затронутые пользователи запускали IE11 в Windows 7. У пользователей Windows 8 проблемы не было.

Ответ №2:

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

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

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

1. Будьте осторожны — это изменит ВСЕ iframes на вашей странице, когда вам нужно настроить таргетинг только на iframes YouTube. Вы должны указать там URL-адрес src, включающий домен YouTube.

Ответ №3:

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

Ответ №4:

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

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