Видео YouTube, встроенное через iframe Игнорирование z-индекса? - PullRequest
128 голосов
/ 31 января 2012

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

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

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

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

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

Ответы [ 10 ]

243 голосов
/ 31 января 2012

Попробуйте добавить 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");
    });
});
28 голосов
/ 10 октября 2012

Joshc ответ был на правильном пути, но я обнаружил, что он полностью удаляет строку запроса ?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"
    });
  }
});
6 голосов
/ 07 февраля 2013

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

&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>
5 голосов
/ 23 июля 2012

У меня такая же проблема на 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 не будет работать.

2 голосов
/ 25 февраля 2015

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

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

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

2 голосов
/ 12 марта 2014

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

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>
1 голос
/ 12 февраля 2014

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

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

и в URL:

http://www.youtube.com/embed/123?wmode=transparent
1 голос
/ 09 октября 2013

Javascript-код BigJacko работал для меня, но в моем случае мне сначала нужно было добавить 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>
1 голос
/ 01 октября 2013

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

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

1 голос
/ 24 сентября 2013

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...