İframe aracılığıyla gömülü YouTube Videosu Z-endeksi yok sayılıyor mu?

Yatay çok düzeyli bir açılır gezinme menüsü uygulamaya çalışıyorum. Menünün hemen altında (dikey olarak), iframe aracılığıyla yerleştirilmiş bir YouTube videosu var. Firefox'taki ana seviye gezinme öğelerinden birinin üzerine gelirsem, açılır menü videonun üstünde düzgün bir şekilde görünüyor .

Bununla birlikte, Chrome ve IE9'da, menü ve iç çerçeve arasında sahip olduğum küçük alanda açılır menünün yalnızca bir şeridi görünüyor. Geri kalanı iframe'in arkasında görünüyor .

Sorun , iframe ile değil , YouTube videosuyla ilgili görünüyor . Test etmek için, iframe'i video yerine başka bir web sitesine hedefledim ve açılır menü IE'de bile iyi çalıştı.

• Soru 1: WTF?
• Soru 2: Neden, z-index:-999 !important; iframe'e açıkça bir ifade koysam bile bu sorun hala devam ediyor?

YouTube yerleştirme kodunun içerdiği ve bir şekilde şeyleri geçersiz kılan bazı dahili CSS var mı?

Wmode eklemeyi deneyin, iki parametresi var gibi görünüyor.

&wmode=Opaque

&wmode=transparent

Neden işe yaradığına dair teknik bir neden ya da daha fazla açıklama bulamıyorum ama bu sorguya bir bakın .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

veya bu

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Joshc'ın cevabı doğru yoldaydı , ancak ?rel=0sorgu dizesini tamamen sildiğini ve onu ?wmode=transparentöğeyle değiştirdiğini fark ettim - bu, başlangıçta siz yapmamış olsanız bile, oynatma işleminin sonunda YouTube Önerilen Videolar listesini görüntüleme etkisine sahiptir. Bunun olmasını istemiyorum.

Böylece kod değişti srcgömülü videonun özelliği, bir soru işareti olup olmadığını görmek için, ilk taranır ?bu önceden varolan sorgu dizesi varlığını gösterir çünkü (zaten içinde olabilir gibi bir şey olabilir ?rel=0ama teoride olabilir YouTube'un gelecekte eklemeyi seçeceği herhangi bir şey olabilir). Zaten orada bir sorgu dizesi varsa, onu korumak istiyoruz, yok etmek değil, çünkü bu YouTube videosuna yapıştıran kişi tarafından seçilen bir ayarı temsil ediyor ve muhtemelen bir nedenle onu seçmişler!

Dolayısıyla, ?bulunursa, wmode=transparentbiçim kullanılarak eklenecektir: &mode=transparentyalnızca önceden var olan sorgu dizesinin sonuna etiketlemek için.

Eğer bir numara? bulunmazsa, kod orijinalinde olduğu gibi ( toomanyairmiles gönderisinde) tam olarak aynı şekilde çalışacak ve URL'ye ?wmode=transparentyeni bir sorgu dizesi olarak eklenecektir .

Şimdi, YouTube URL'sinin sonunda bir sorgu dizesi olarak neyin bulunup bulunmadığına bakılmaksızın, korunur ve gerekli wmodeparametreler daha önce olanlara zarar vermeden enjekte edilir veya eklenir.

İşte document.readyişlevinize bırakılacak kod :

$('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"
    });
  }
});

Src url'sine şu ikisinden birini eklemeniz yeterlidir:

&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'da da aynı sorunu yaşıyorum iframe yalnızca internet explorer'a yerleştiriliyor.

Z-endeksi tamamen göz ardı ediliyordu veya flash video mümkün olan en yüksek dizinde görünüyordu.

Yukarıdaki jquery betiğini biraz uyarlayarak kullandığım şey buydu.

Yerleştirme kodum, doğrudan YouTube'dan ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

JQuery, yukarıdaki cevaptan biraz uyarlanmıştır ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Temel olarak , yerleştirme ayarlarınızda video bittiğinde önerilen videoları göster'i seçmezseniz ?rel=0, "src"url'nizin sonunda bir tane olur . Bu yüzden, olması durumunda değiştirme bitini ekledim ?rel=0. Aksi takdirde ?wmode=transparentişe yaramaz.

?wmode=transparentYouTube URL'sinin sonuna ekleyebiliriz . Bu, YouTube'a videoyu wmode ayarına dahil etmesini söyleyecektir. Yani yeni yerleştirme kodunuz şöyle görünecek: -

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

Sadece bu benim için çalıştı:

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

Onu footer.php Wordpress dosyasına yüklüyorum. Kod burada yorumda bulundu (teşekkürler Gerson)

Sorgu dizemin başındaki wmode = opaque veya transparent hiçbir şeyi çözmedi. Bu sorun benim için yalnızca Chrome'da ortaya çıkıyor ve tüm bilgisayarlarda bile görülmüyor. Sadece bir işlemci. Vimeo yerleştirmelerinde ve muhtemelen diğerlerinde de oluşur.

Kullandığım önyükleme modlarının 'gösterilen' ve 'gizli' olayına iliştirmek, iframe'i 1x1 piksele ayarlayan bir sınıf eklemek ve modal kapandığında sınıfı kaldırmak için çözümüm. Çalışıyor gibi görünüyor ve uygulanması basit.

Yukarıdaki cevaplar benim için gerçekten işe yaramadı, sarmalayıcıda bir tıklama olayım oldu ve yani 7,8,9,10 z-endeksini görmezden geldim, bu yüzden düzeltmem sarmalayıcıya bir arka plan rengi veriyordu ve birdenbire çalıştı . Şeffaf olması gerekiyordu, bu yüzden sarmalayıcıyı arka plan rengi beyaz ve ardından opaklık 0.01 ile tanımladım ve şimdi çalışıyor. Yukarıdaki fonksiyonlara da sahibim, bu yüzden bir kombinasyon olabilir.

Neden işe yaradığını bilmiyorum, sadece yaptığı için mutluyum.

BigJacko'nun Javascript kodu benim için çalıştı, ancak benim durumumda önce bazı JQuery "çatışmasız" kodu eklemem gerekiyordu. Sitemde çalışan revize edilmiş versiyon şu şekildedir:

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

İframe'de ihtiyacınız olan tek şey:

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

ve URL’de:

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