YouTube-Video eingebettet über iframe Z-Index ignorieren?

Ich versuche, ein horizontales mehrstufiges Dropdown-Navigationsmenü zu implementieren. Unmittelbar unterhalb (vertikal) des Menüs habe ich ein YouTube-Video über iframe eingebettet. Wenn ich mit der Maus über eines der Hauptnavigationselemente in Firefox fahre, wird das Dropdown-Menü ordnungsgemäß über dem Video angezeigt .

In Chrome und IE9 ist jedoch nur ein Teil des Dropdowns in dem kleinen Bereich zwischen dem Menü und dem Iframe sichtbar. Der Rest scheint hinter dem Iframe zu stehen.

Das Problem scheint mit dem YouTube-Video zu zusammenhängen, nicht mit dem Iframe. Zum Testen habe ich den Iframe auf eine andere Website anstatt auf das Video gerichtet, und das Dropdown-Menü hat auch im IE einwandfrei funktioniert.

• Frage 1: WTF?
• Frage 2: Warum z-index:-999 !important; tritt dieses Problem immer noch auf , selbst wenn ich explizit einen auf den Iframe setze ?

Gibt es internes CSS im YouTube-Einbettungscode, das die Dinge irgendwie außer Kraft setzt?

Versuchen Sie, wmode hinzuzufügen, es scheint zwei Parameter zu haben.

&wmode=Opaque

&wmode=transparent

Ich kann keinen technischen Grund finden, warum es funktioniert, oder viel mehr Erklärungen, aber schauen Sie sich diese Abfrage an .

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

oder dieses

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

Die Antwort von Joshc war auf dem richtigen Weg, aber ich stellte fest, dass der ?rel=0Querystring vollständig gelöscht und durch das ?wmode=transparentElement ersetzt wird. Dadurch wird die Liste der empfohlenen YouTube-Videos am Ende der Wiedergabe angezeigt, obwohl Sie dies ursprünglich nicht getan haben. Ich möchte nicht, dass dies passiert.

Ich änderte den Code so , dass das srcAttribut des eingebetteten Videos zuerst gescannt wird, um zu sehen , ob es ein Fragezeichen ?in ihm bereits (weil dies das Vorhandensein eines vorbestehenden Query - String bezeichnet, die vielleicht so etwas wie ?rel=0aber in der Theorie könnten alles sein, was YouTube in Zukunft anhängen möchte). Wenn bereits eine Abfragezeichenfolge vorhanden ist, möchten wir diese beibehalten und nicht zerstören, da sie eine Einstellung darstellt, die von denjenigen ausgewählt wurde, die in dieses YouTube-Video eingefügt wurden, und sie vermutlich aus einem bestimmten Grund ausgewählt haben!

Wenn dies ?gefunden wird, wmode=transparentwird das im folgenden Format angehängt: &mode=transparentum es einfach am Ende der bereits vorhandenen Abfragezeichenfolge zu kennzeichnen.

Wenn nein ?gefunden wird, funktioniert der Code genauso wie ursprünglich (im Beitrag von toomanyairmiles ) und wird nur ?wmode=transparentals neue Abfragezeichenfolge an die URL angehängt .

Unabhängig davon, was sich möglicherweise bereits als Abfragezeichenfolge am Ende der YouTube-URL befindet oder nicht, wird diese beibehalten und die erforderlichen wmodeParameter werden eingefügt oder hinzugefügt, ohne dass das zuvor vorhandene beschädigt wird.

Hier ist der Code, der in Ihre document.readyFunktion eingefügt werden soll:

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

Fügen Sie einfach eine dieser beiden zur src-URL hinzu:

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

Ich habe das gleiche Problem bei YouTube-Iframe-Einbettungen nur im Internet Explorer.

Der Z-Index wurde vollständig ignoriert oder das Flash-Video wurde nur mit dem höchstmöglichen Index angezeigt.

Dies war, was ich benutzte, wobei ich das obige jquery-Skript leicht anpasste.

Mein Einbettungscode direkt von YouTube ...

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

Die jQuery hat sich leicht an die obige Antwort angepasst ...

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

Wenn Sie nicht "Vorgeschlagene Videos anzeigen" auswählen , wenn das Video in Ihren Einbettungseinstellungen beendet ist, wird ?rel=0am Ende Ihrer "src"URL eine angezeigt. Also habe ich das Ersetzungsbit hinzugefügt, falls ?rel=0vorhanden. Sonst ?wmode=transparentfunktioniert es nicht.

Wir können einfach ?wmode=transparentam Ende der YouTube-URL hinzufügen . Dadurch wird YouTube angewiesen, das Video in den wmode-Satz aufzunehmen. Ihr neuer Einbettungscode sieht also folgendermaßen aus:

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

Nur dieser hat bei mir funktioniert:

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

Ich lade es in die Wordpress-Datei footer.php. Code im Kommentar hier gefunden (danke Gerson)

wmode = undurchsichtig oder transparent am Anfang meiner Abfragezeichenfolge hat nichts gelöst. Dieses Problem tritt bei mir nur in Chrome auf und nicht auf allen Computern. Nur eine CPU. Es kommt auch in Vimeo-Einbettungen und möglicherweise auch in anderen vor.

Meine Lösung, um an das 'angezeigte' und 'versteckte' Ereignis der von mir verwendeten Bootstrap-Modalitäten anzuhängen, füge eine Klasse hinzu, die den Iframe auf 1x1 Pixel setzt, und entferne die Klasse, wenn das Modal geschlossen wird. Scheint so, als ob es funktioniert und einfach zu implementieren ist.

Die Antworten oben funktionierten nicht wirklich für mich, ich hatte ein Klickereignis auf dem Wrapper und dh 7,8,9,10 ignorierte den Z-Index, also gab mein Fix dem Wrapper eine Hintergrundfarbe und es funktionierte plötzlich . Obwohl angenommen wurde, dass es transparent ist, habe ich den Wrapper mit der Hintergrundfarbe Weiß und dann der Deckkraft 0,01 definiert, und jetzt funktioniert es. Ich habe auch die Funktionen oben, so könnte es eine Kombination sein.

Ich weiß nicht warum es funktioniert, ich bin nur froh, dass es funktioniert.

BigJackos Javascript-Code funktionierte für mich, aber in meinem Fall musste ich zuerst einen JQuery-Code "noconflict" hinzufügen. Hier ist die überarbeitete Version, die auf meiner Website funktioniert hat:

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

Alles, was Sie für den Iframe benötigen, ist:

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

und in der URL:

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