Встраивание видео YouTube и проблемы с z-index

При встраивании видео YouTube с помощью iframe под многоуровневым раскрывающимся меню навигации вы можете столкнуться с проблемы, при которых раскрывающееся меню появляется позади видео в Chrome и Internet Explorer. При наведении курсора на основной элемент навигации раскрывающееся меню должно отображаться поверх видео во всех браузерах.

Вопрос 1. Почему раскрывающееся меню появляется позади видео YouTube в Chrome и IE9?

Эта проблема связана с самим видео YouTube, а не с iframe. Встраиваемые элементы YouTube включают внутренний CSS, который переопределяет другие настройки CSS, включая значения z-index.

Вопрос 2. Почему установка z-index:-999 !важна; в iframe по-прежнему вызывает проблему?

Переопределяющий CSS в коде внедрения YouTube имеет приоритет над любыми настройками z-index, которые вы применяете к iframe.

Решение:

Чтобы устранить эту проблему, добавьте следующий параметр в URL-адрес встроенного видео:

&wmode=Opaque

Этот параметр позволяет видео сливаться с фоном, разрешение другим элементам на странице появляться поверх нее.

Дополнительные примечания:

• Вы также можете использовать параметр wmode=transparent вместо Opaque, хотя это может привести к проблемам с прозрачностью в некоторых браузерах.
• В качестве альтернативы вы можете использовать jQuery для изменения URL-адресов всех iframe на вашей странице перед их загрузкой, как показано в фрагменте кода ниже:

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});