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


130

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

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

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

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

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


Можете выложить ссылку - без кода сложно дать полезный ответ.
toomanyairmiles

возможный дубликат z-index и iFrames!
Стефанфридрих


для всех, кто интересуется, как это работает в 2015 году, <embed wmode="transparent" ...>раздел - это все, что вам нужно (по крайней мере, в firefox), и не нужно беспокоиться о настройке wmode в urls paramили iframes
RozzA

имейте в виду, что по какой-то причине существует два разных типа ссылок на YouTube: youtube.com/v/video_id и youtube.com/embed/video_id . V-link игнорирует z-index в IE, но встраивание работает нормально.
Антон Лыхин

Ответы:


243

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

6
(Я ОП) Всем спасибо! Я наткнулся на аналогичное решение на manisheriar.com/blog/flash_objects_and_z_index . Кажется, что ключ использует как name = "wmode" value = "transparent" для <param>, так и wmode = "transparent" на <embed>. Как я и подозревал, это не проблема iframe. Кажется, проблема заключается в том, что Flash хочет (требует?) Наивысшего z-индекса, если вы не заставляете его быть прозрачным.
user249493

5
Если вы используете API-интерфейс iframe JS, playerVar wmodeтакже работает, хотя это не задокументировано.
Richard M

1
Я интегрировал это, и мой fancybox stil не работает в ie7 / 8, и я все еще получаю видео сверху. encompasscu.com.au/homeiswheretheheartis, что я могу сделать
Дэн

6
Параметр? Wmode = transparent сработал для меня как шарм. Мне только жаль, что я не смог быстрее найти правильный вопрос. Через 24 часа после того, как я начал искать, я нашел этот ответ. Спасибо, что ответили и разместили запрос выше!
djmarquette 06

1
@Dan, см. Мою правку ... возможно, у вас уже есть строка запроса в вашем встроенном коде YouTube. (например,? rel = 0, чтобы не показывать релевантные видео). В этом случае используйте & wmode = transparent (или opaque - я слышал, что opaque использует меньше системных ресурсов, поэтому я использую его в основном, если у меня нет причины сделать его прозрачным).
Шон Кендл

28

Ответ Джошка был правильным, но я обнаружил, что он полностью удаляет ?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"
    });
  }
});

Это сработало для меня, тогда как принятый ответ - нет (даже после исправления кода). Спасибо за исправление.
Том

? запускает строку запроса параметра, & является разделителем. Основные вещи. См stackoverflow.com/questions/2667551/...
cdonner

2
Это решило мою проблему за 10 секунд до отказа!
Malibur

1
Отлично! Я искал это целую вечность!
Jeroen W

2
Это opaqueне Opaque(обратите внимание на случай)
Шимон Тода

6

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

5

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

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

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

Это уже предлагалось во многих ответах здесь, нет необходимости повторять это с еще одним ответом. Если у вас есть что-то новое, пожалуйста, сделайте это, иначе, пожалуйста, не просто повторяйте то, что уже опубликовали другие.
Shadow Wizard is Ear For You

2

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

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


1

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

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


1

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

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


1

Код 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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.