YouTube Video Встраивается через iframe Игнорирует z-index?

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Попробуйте добавить 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");
    });
});

Ответ 2

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

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

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

Если no ? не найден, тогда код будет работать точно так же, как и первоначально (в сообщении 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"
    });
  }
});

Ответ 3

Просто добавьте один из этих двух в 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>

Ответ 4

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

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

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

Мой код для встраивания прямо с 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 в конце вашего URL-адреса "src". Поэтому я добавил бит замены в случае, если ?rel=0 существует. В противном случае ?wmode=transparent не будет работать.


Ответ 5

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

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

Ответ 6

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

<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. Код, найденный в комментарии здесь (спасибо Герсону)

Ответ 7

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

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

Ответ 8

Ответы abow did not действительно работают для меня, у меня было событие click на обертке, а ie 7,8,9,10 проигнорировали z-index, поэтому мое исправление придавало оболочке фоновый цвет, и все это внезапно сработал. Al, хотя предполагалось быть прозрачным, поэтому я определил оболочку белым цветом фона, а затем opacity 0.01, и теперь он работает. У меня также есть функции выше, поэтому это может быть комбинация.

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

Ответ 9

Код BigJacko Javascript работал у меня, но в моем случае мне сначала пришлось добавить код JQuery "noconflict". Здесь пересмотренная версия, которая работала на моем сайте:

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

Ответ 10

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

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

и в URL:

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