Wideo YouTube osadzone przez iframe Ignorujesz indeks Z?

Próbuję zaimplementować poziome wielopoziomowe rozwijane menu nawigacyjne. Bezpośrednio poniżej (w pionie) menu mam wideo YouTube osadzone za pośrednictwem iframe. Jeśli najedziesz kursorem na jeden z głównych elementów nawigacyjnych w przeglądarce Firefox, menu rozwijane zostanie prawidłowo wyświetlone u góry wideo.

Jednak w Chrome i IE9 tylko wycinek listy jest widoczny w małym obszarze, który mam między menu a ramką iframe. Reszta wydaje się znajdować za ramką iframe.

Wydaje się, że problem jest związany z filmem w YouTube, a nie z ramką iframe. Aby przetestować, skierowałem iframe na inną stronę internetową zamiast wideo, a menu rozwijane działało dobrze, nawet w IE.

• Pytanie 1: WTF?
• Pytanie 2: Dlaczego, nawet jeśli wyraźnie umieszczę z-index:-999 !important; w elemencie iframe, ten problem nadal występuje?

Czy istnieje jakiś wewnętrzny kod CSS, który zawiera kod YouTube do umieszczenia na stronie, który w jakiś sposób nadpisuje rzeczy?

Spróbuj dodać wmode, wydaje się, że ma dwa parametry.

&wmode=Opaque

&wmode=transparent

Nie mogę znaleźć technicznego powodu, dla którego to działa, ani wielu innych wyjaśnień, ale spójrz na to zapytanie .

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

albo to

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

Odpowiedź Joshca była na właściwej ścieżce, ale stwierdziłem, że całkowicie usuwa ?rel=0kwerendę i zastępuje ją ?wmode=transparentelementem - co powoduje wyświetlenie listy sugerowanych filmów wideo YouTube na końcu odtwarzania, mimo że pierwotnie tego nie robiłeś chcę, żeby to się stało.

Zmieniłem kod tak, aby srcatrybut osadzonego wideo był skanowany jako pierwszy, aby sprawdzić, czy jest już ?w nim znak zapytania (ponieważ oznacza to obecność wcześniej istniejącego ciągu zapytania, który może być czymś w rodzaju, ?rel=0ale teoretycznie mógłby być wszystkim, co YouTube zdecyduje się dołączyć w przyszłości). Jeśli istnieje już ciąg zapytania, chcemy go zachować, a nie zniszczyć, ponieważ reprezentuje ustawienie wybrane przez tego, kto wklejał ten film na YouTube, i prawdopodobnie wybrał to z jakiegoś powodu!

Tak więc, jeśli ?zostanie znaleziony, wmode=transparentzostanie dołączony przy użyciu formatu: &mode=transparentaby po prostu oznaczyć go na końcu wcześniej istniejącego ciągu zapytania.

Jeśli nie ?zostanie znalezione, kod będzie działał dokładnie tak samo, jak pierwotnie (w poście toomanyairmiles ), dołączając ?wmode=transparentjako nowy ciąg zapytania do adresu URL.

Teraz, niezależnie od tego, co może znajdować się na końcu adresu URL YouTube jako ciąg zapytania lub nie, zostanie on zachowany, a wymagane wmodeparametry zostaną wprowadzone lub dodane bez uszkodzenia tego, co było wcześniej.

Oto kod, który należy umieścić w document.readyfunkcji:

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

Po prostu dodaj jeden z tych dwóch do adresu 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>

Mam ten sam problem z osadzaniem iframe YouTube tylko w przeglądarce Internet Explorer.

Indeks Z był całkowicie ignorowany lub wideo flash właśnie pojawiało się z najwyższym możliwym indeksem.

Tego właśnie użyłem, nieznacznie dostosowując powyższy skrypt jquery.

Mój kod do umieszczenia na stronie, prosto z YouTube ...

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

JQuery slighty dostosowany z powyższej odpowiedzi ...

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

Zasadniczo, jeśli nie wybierzesz opcji Pokaż sugerowane filmy po zakończeniu odtwarzania w ustawieniach osadzania, masz ?rel=0na końcu "src"adresu URL. Więc dodałem bit zastępczy, jeśli ?rel=0istnieje. W przeciwnym razie ?wmode=transparentnie zadziała.

Możemy po prostu dodać ?wmode=transparentna końcu adresu URL YouTube. To powie YouTube, aby dołączył wideo z zestawem wmode. Tak więc nowy kod do umieszczenia na stronie będzie wyglądał następująco: -

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

Tylko ten działał dla mnie:

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

Ładuję go do pliku footer.php Wordpress. Kod znaleziony w komentarzu tutaj (dzięki Gerson)

wmode = nieprzezroczysty lub przezroczysty na początku mojego ciągu zapytania nie rozwiązał niczego. Ten problem występuje tylko w przeglądarce Chrome, a nawet nie na wszystkich komputerach. Tylko jeden procesor. Występuje również w osadzonych vimeo i prawdopodobnie innych.

Moje rozwiązanie polega na dołączeniu do zdarzenia „pokazanego” i „ukrytego” modali ładowania początkowego, których używam, dodać klasę, która ustawia ramkę iframe na piksele 1x1 i usunąć klasę po zamknięciu modalu. Wydaje się, że to działa i jest łatwe do wdrożenia.

Odpowiedzi powyżej tak naprawdę dla mnie nie działały, miałem zdarzenie kliknięcia na opakowaniu i tj. 7,8,9,10 zignorowało indeks Z, więc moja poprawka nadawała otoku kolor tła i nagle zadziałało . Chociaż miał być przezroczysty, zdefiniowałem opakowanie za pomocą koloru tła biały, a następnie krycia 0,01, i teraz działa. Mam też powyższe funkcje, więc może to być kombinacja.

Nie wiem, dlaczego to działa, po prostu cieszę się, że tak.

Kod Javascript w BigJacko zadziałał dla mnie, ale w moim przypadku musiałem najpierw dodać kod JQuery „noconflict”. Oto poprawiona wersja, która działała w mojej witrynie:

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

Wszystko, czego potrzebujesz w iframe, to:

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

aw adresie URL:

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