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.
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.
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:
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!
