Видео YouTube, встроенное через iframe Игнорирование z-индекса?

Я пытаюсь реализовать горизонтальное многоуровневое выпадающее меню навигации. Сразу под (по вертикали) меню у меня есть видео с YouTube, встроенное через iframe. Если я наведу курсор на один из основных элементов навигации в Firefox, раскрывающееся меню правильно появится поверх видео.

Однако в Chrome и IE9 в небольшой области пространства между меню и iframe видна лишь полоска раскрывающегося списка. Остальное, похоже, находится за iframe.

Проблема, похоже, связана с видео YouTube, а не с iframe. Для проверки я направил iframe на другой веб-сайт, а не на видео, и выпадающее меню работало нормально даже в IE.

• Вопрос 1: Какого черта?
• Вопрос 2: Почему, даже если я явно помещаю z-index:-999 !important; в iframe, эта проблема все равно возникает?

Есть ли какой-то внутренний CSS, который включает в себя код встраивания YouTube, который как-то переопределяет вещи?

Попробуйте добавить wmode, похоже, у него два параметра.

&wmode=Opaque

&wmode=transparent

Я не могу найти техническую причину, почему это работает, или более подробное объяснение, но взгляните на этот запрос .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

или это

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Ответ Джошка был правильным, но я обнаружил, что он полностью удаляет ?rel=0строку запроса и заменяет ее ?wmode=transparentэлементом, что приводит к отображению списка рекомендованных видео YouTube в конце воспроизведения, хотя изначально вы этого не делали. не хочу, чтобы это случилось.

Я изменил код так, чтобы srcатрибут встроенного видео сначала сканировался, чтобы увидеть, есть ли ?в нем уже знак вопроса (потому что это означает наличие ранее существовавшей строки запроса, которая может быть чем-то вроде, ?rel=0но теоретически может быть всем, что YouTube добавит в будущем). Если там уже есть строка запроса, мы хотим сохранить ее, а не уничтожить, потому что она представляет собой настройку, выбранную тем, кто вставлял это видео YouTube, и, вероятно, они выбрали ее не просто так!

Итак, если ?он найден, wmode=transparentон будет добавлен с использованием формата: &mode=transparentпросто пометить его в конце уже существующей строки запроса.

Если ничего ?не найдено, код будет работать точно так же, как и изначально (в сообщении toomanyairmiles ), добавляя ?wmode=transparentк URL-адресу как новую строку запроса.

Теперь, независимо от того, что может или не может быть в конце URL-адреса YouTube в виде строки запроса, оно сохраняется, а необходимые wmodeпараметры вводятся или добавляются без ущерба для того, что было раньше.

Вот код для вашей document.readyфункции:

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

Просто добавьте один из этих двух в URL-адрес src:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

У меня такая же проблема с YouTube. Iframe встраивается только в Internet Explorer.

Z-index полностью игнорировался, или флэш-видео просто отображалось с максимально возможным индексом.

Это было то, что я использовал, немного адаптировав приведенный выше скрипт jquery.

Мой код для встраивания прямо с YouTube ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

JQuery немного адаптирован из приведенного выше ответа ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Обычно, если вы не выбираете Показать предлагаемые видео, когда видео заканчивается в настройках встраивания, у вас будет ?rel=0в конце вашего "src"URL-адреса. Поэтому я добавил бит замены на случай, если он ?rel=0существует. Иначе ?wmode=transparentне получится.

Мы можем просто добавить ?wmode=transparentв конец URL-адреса YouTube. Это скажет YouTube включить видео с установленным wmode. Итак, ваш новый код для встраивания будет выглядеть так: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

У меня работал только этот:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

Я загружаю его в файл footer.php Wordpress. Код найден в комментарии здесь (спасибо Герсону)

wmode = opaque или transparent в начале моей строки запроса ничего не решило. У меня эта проблема возникает только в Chrome и даже не на всех компьютерах. Всего один процессор. Он также встречается в vimeo embeds и, возможно, в других.

Мое решение для присоединения к «показанному» и «скрытому» событию модальных окон начальной загрузки, которые я использую, добавить класс, который устанавливает iframe в 1x1 пиксель, и удалить класс, когда модальное окно закрывается. Похоже, что это работает, и его просто реализовать.

Ответы, приведенные выше, действительно не сработали для меня, у меня было событие щелчка на оболочке, и, например, 7,8,9,10 игнорировали z-index, поэтому мое исправление давало оболочке фоновый цвет, и он внезапно сработал , Хотя он должен был быть прозрачным, поэтому я определил оболочку с белым цветом фона, а затем непрозрачностью 0,01, и теперь он работает. У меня также есть функции, указанные выше, так что это может быть комбинация.

Я не знаю, почему это работает, я просто счастлив, что это работает.

Код Javascript BigJacko работал у меня, но в моем случае мне сначала пришлось добавить некоторый код JQuery «без конфликтов». Вот исправленная версия, которая работала на моем сайте:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Все, что вам нужно в iframe, это:

...wmode="opaque"></iframe>

и в URL:

http://www.youtube.com/embed/123?wmode=transparent