YouTube Video Embedded через iframe Ігнорування z-індексу?

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

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

Здається, проблема пов’язана з відео YouTube, а не з рамкою iframe. Щоб перевірити, я спрямовував кадр iframe на інший веб-сайт, а не на відео, і спадне меню працювало чудово, навіть у IE.

• Питання 1: WTF?
• Запитання 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-індекс повністю ігнорувався, або флеш-відео просто з'являлося з найвищим можливим індексом.

Це те, що я використав, трохи адаптуючи вищевказаний сценарій 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 = непрозорий або прозорий на початку мого рядка запитання нічого не вирішив. Ця проблема для мене виникає лише в Chrome, а не на всіх комп’ютерах. Всього один процесор. Він виникає і при вбудовуванні vimeo, і, можливо, інших.

Моє рішення приєднати до події "показано" та "приховано" модалів завантажувальної машини, якими я користуюся, додати клас, який встановлює кадр iframe на 1х1 піксель, і видалити клас, коли модаль закриється. Здається, це працює і його легко здійснити.

Відповіді Abow насправді не працювали для мене, у мене відбулася подія клацання на обгортці, тобто 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