Видео YouTube встроено через iframe игнорируя z-индекс?

Joshcответ был на правильном пути, но я обнаружил, что он полностью удаляет ?rel=0 строка запроса и заменяет ее на ?wmode=transparent item-который имеет эффект отображения списка предлагаемых видео 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-индекс полностью игнорировался, или флэш-видео просто появлялось на самом высоком возможном индексе.

это было то, что я использовал, слегка адаптируя приведенный выше скрипт 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. Поэтому я добавил бит замены в случае . В противном случае ?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>

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

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

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

ответы abow действительно не работали для меня, у меня было событие щелчка на обертке, и ie 7,8,9,10 проигнорировал Z-индекс, поэтому мое исправление давало обертке цвет фона, и все это внезапно сработало. Хотя он должен был быть прозрачным, поэтому я определил обертку с фоном-цвет белый, а затем непрозрачность 0.01, и теперь он работает. У меня также есть функции выше, так что это может быть комбинация.

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

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>

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

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

и в URL:

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