Warum werden YouTube-Iframes in Dropdown-Menüs in verschiedenen Browsern unterschiedlich dargestellt?

In IFrames eingebettete YouTube-Videos vernachlässigen den Z-Index in bestimmten Browsern

Mehrstufige Dropdown-Navigationsmenüs mit darunter über IFrames eingebetteten YouTube-Videos haben in bestimmten Web-Sites zu Rendering-Problemen geführt Browser. Während das Dropdown-Menü in Firefox über dem Video erscheint, bleibt in Chrome und IE9 nur ein Bruchteil davon sichtbar.

Der Schuldige ist überraschenderweise nicht der Iframe, sondern das YouTube-Video selbst. Wenn Sie den Iframe auf andere externe Websites ausrichten, wird das Dropdown-Menü auch im IE ordnungsgemäß angezeigt. Dies deutet auf ein mögliches Problem mit dem Einbettungscode von YouTube hin.

Experten empfehlen die Einbindung des wmode-Parameters, der zwei Werte hat:

• Opaque
• transparent

Obwohl es nur begrenzte Dokumentationen gibt, die seine Wirkung erklären, kann das Problem durch Anhängen dieses Parameters an die URL des Videos, wie im folgenden Beispiel gezeigt, behoben werden:

<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 auch ein jQuery-Skript verwendet werden Ändern Sie alle IFrames auf einer Seite:

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

Dieser Ansatz hebt erfolgreich die Z-Index-Dominanz von YouTube-Videos auf, sodass Dropdown-Menüs und andere Elemente korrekt darüber angezeigt werden können.

Das obige ist der detaillierte Inhalt vonWarum werden YouTube-Iframes in Dropdown-Menüs in verschiedenen Browsern unterschiedlich dargestellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!