Warum erscheint mein Dropdown-Menü hinter einem eingebetteten YouTube-Video in Chrome und IE9?

YouTube-Video über Iframe eingebettet. Z-Index wird ignoriert?

Bei dem Versuch, ein horizontales Dropdown-Navigationsmenü mit mehreren Ebenen zu erstellen, sah sich ein Benutzer mit einem Problem konfrontiert Anomalie, bei der das Dropdown-Menü nicht über einem eingebetteten YouTube-Video in Chrome und IE9 angezeigt wurde (während es in Firefox funktionierte). Das Problem war auf das YouTube-Video selbst beschränkt, nicht auf die verwendete Iframe-Technik.

Frage 1: Warum die Diskrepanz?

Auch bei einem explizit festgelegten Z-Index:-999 !important; Beim IFrame blieb das Dropdown-Menü hinter dem Video verborgen. Dies deutet auf eine CSS-Interferenz innerhalb des YouTube-Einbettungscodes hin.

Frage 2: Beheben des Problems mit Wmode

Um die Situation zu beheben, scheint das Hinzufügen von Wmode zum YouTube-Einbettungscode das Problem zu lösen. Konkret können die folgenden Parameter verwendet werden:

• &wmode=Opaque
• &wmode=transparent

Der technische Grund, warum diese Lösung funktioniert, bleibt unklar. Das folgende Codebeispiel veranschaulicht jedoch die Implementierung:

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

Alternativ kann der folgende jQuery-Code bereitgestellt werden, um das Z-Index-Problem für alle Iframes auf einer Seite zu beheben:

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

Durch die Verwendung des wmode-Parameters kann der YouTube-Einbettungscode so angepasst werden, dass er sich wie erwartet verhält, sodass das Dropdown-Menü in allen gängigen Browsern über dem eingebetteten Video angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum erscheint mein Dropdown-Menü hinter einem eingebetteten YouTube-Video in Chrome und IE9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!