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

130

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?

user249493
quelle
Können Sie einen Link posten? Ohne Code ist es schwierig, eine hilfreiche Antwort zu geben.
Toomanyairmiles
Mögliches Duplikat von Z-Index und iFrames!
Stephanfriedrich
Für alle, die sich fragen, wie dies im Jahr 2015 funktioniert, ist der <embed wmode="transparent" ...>Abschnitt alles, was Sie brauchen (zumindest in Firefox), und Sie müssen sich keine Gedanken darüber machen, wie Sie den Modus in url's param' oder iframes
einstellen
Denken Sie daran, dass es aus irgendeinem Grund zwei verschiedene Arten von YouTube-Links gibt: youtube.com/v/video_id und youtube.com/embed/video_id . Der V-Link ignoriert den Z-Index im IE, aber das Einbetten funktioniert einwandfrei.
Anton Lyhin

Antworten:

243

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");
    });
});
toomanyairmiles
quelle
6
(Ich bin der OP) Danke an alle! Ich bin auf eine ähnliche Lösung unter manisheriar.com/blog/flash_objects_and_z_index gestoßen. Der Schlüssel scheint sowohl name = "wmode" value = "transparent" auf einem <param> als auch wmode = "transparent" auf dem <embed> zu verwenden. Wie ich vermutet habe, handelt es sich nicht um ein Iframe-Problem. Es scheint ein Problem zu sein, wenn Flash den höchsten Z-Index will (verlangt?), Es sei denn, Sie erzwingen, dass er transparent ist.
user249493
5
Wenn Sie die iframe JS-API verwenden, funktioniert wmodeauch eine playerVar, obwohl sie nicht dokumentiert ist.
Richard M
1
Ich habe dies integriert und meine Fancybox funktioniert in IE7 / 8 nicht und ich bekomme immer noch das Video oben. comprasscu.com.au/homeiswheretheheartis was kann ich tun
Dan
6
Die Option? Wmode = transparent hat für mich wie ein Zauber gewirkt. Ich wünschte nur, ich wäre schneller darin, die richtige Frage zu finden. 24 Stunden nachdem ich angefangen hatte zu suchen, fand ich diese Antwort. Vielen Dank für die Beantwortung und Veröffentlichung der obigen Frage!
Djmarquette
1
@Dan, siehe meine Bearbeitung ... Möglicherweise hast du bereits eine Abfragezeichenfolge in deinem YouTube-Einbettungscode. (wie? rel = 0, um keine relevanten Videos anzuzeigen). Wenn dies der Fall ist, verwenden Sie & wmode = transparent (oder undurchsichtig - ich habe gehört, dass opak weniger Systemressourcen verwendet, daher verwende ich das hauptsächlich, es sei denn, ich habe einen Grund, es transparent zu machen).
Sean Kendle
28

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"
    });
  }
});
BigJacko
quelle
Dies funktionierte für mich, während die akzeptierte Antwort nicht funktionierte (auch nach dem Korrigieren des Codes). Vielen Dank für das Drop-In-Update.
Tom
? Startet die Parameterabfragezeichenfolge und ist das Trennzeichen. Grundlegende Sachen. Siehe stackoverflow.com/questions/2667551/…
cdonner
2
Dies hat mein Problem 10 Sekunden vor dem Aufgeben behoben!
Malibur
1
Perfekt! Ich habe ewig danach gesucht!
Jeroen W
2
Es ist opaquenicht Opaque(beachten Sie den Fall)
Szymon Toda
6

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>
Code.Town
quelle
5

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.


Joshc
quelle
2

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>
user3410247
quelle
Dies wurde bereits in vielen Antworten hier vorgeschlagen, ohne dass es mit einer weiteren Antwort wiederholt werden muss. Wenn Sie etwas Neues hinzufügen möchten, tun Sie dies bitte, andernfalls wiederholen Sie nicht einfach das, was andere bereits gepostet haben.
Shadow Wizard ist Ear For You
2

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)

dragoeco
quelle
1

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.

Danny
quelle
1

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.

Eduardo
quelle
1

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>
cclay
quelle
1

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
Sam Thompson
quelle