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?
<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 inurl
'sparam
' oderiframe
sAntworten:
Versuchen Sie, wmode hinzuzufügen, es scheint zwei Parameter zu haben.
Ich kann keinen technischen Grund finden, warum es funktioniert, oder viel mehr Erklärungen, aber schauen Sie sich diese Abfrage an .
oder dieses
quelle
wmode
auch eine playerVar, obwohl sie nicht dokumentiert ist.Die Antwort von Joshc war auf dem richtigen Weg, aber ich stellte fest, dass der
?rel=0
Querystring vollständig gelöscht und durch das?wmode=transparent
Element 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
src
Attribut 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=0
aber 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=transparent
wird das im folgenden Format angehängt:&mode=transparent
um 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=transparent
als 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
wmode
Parameter werden eingefügt oder hinzugefügt, ohne dass das zuvor vorhandene beschädigt wird.Hier ist der Code, der in Ihre
document.ready
Funktion eingefügt werden soll:quelle
opaque
nichtOpaque
(beachten Sie den Fall)Fügen Sie einfach eine dieser beiden zur src-URL hinzu:
quelle
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 ...
Die jQuery hat sich leicht an die obige Antwort angepasst ...
Wenn Sie nicht "Vorgeschlagene Videos anzeigen" auswählen , wenn das Video in Ihren Einbettungseinstellungen beendet ist, wird
?rel=0
am Ende Ihrer"src"
URL eine angezeigt. Also habe ich das Ersetzungsbit hinzugefügt, falls?rel=0
vorhanden. Sonst?wmode=transparent
funktioniert es nicht.quelle
Wir können einfach
?wmode=transparent
am 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:quelle
Nur dieser hat bei mir funktioniert:
Ich lade es in die Wordpress-Datei footer.php. Code im Kommentar hier gefunden (danke Gerson)
quelle
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.
quelle
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.
quelle
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:
quelle
Alles, was Sie für den Iframe benötigen, ist:
und in der URL:
quelle