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

YouTube-Video-Einbettungen und Z-Index-Probleme

Beim Einbetten eines YouTube-Videos mithilfe eines Iframes unterhalb eines mehrstufigen Dropdown-Navigationsmenüs können Probleme auftreten Probleme, bei denen das Dropdown-Menü hinter dem Video in Chrome und Internet Explorer angezeigt wird. Wenn Sie mit der Maus über ein Hauptnavigationselement fahren, sollte das Dropdown-Menü in allen Browsern über dem Video erscheinen.

Frage 1: Warum erscheint das Dropdown-Menü hinter dem YouTube-Video in Chrome und IE9?

Dieses Problem hängt mit dem YouTube-Video selbst zusammen, nicht mit dem Iframe. YouTube-Einbettungen enthalten internes CSS, das andere CSS-Einstellungen außer Kraft setzt, einschließlich Ihrer Z-Index-Werte.

Frage 2: Warum ist die Einstellung von Z-Index:-999 !important; auf dem Iframe verursachen immer noch das Problem?

Das überschreibende CSS im YouTube-Einbettungscode hat Vorrang vor allen Z-Index-Einstellungen, die Sie auf den Iframe anwenden.

Lösung:

Um dieses Problem zu beheben, fügen Sie den folgenden Parameter zu den eingebetteten Videos hinzu URL:

&wmode=Opaque

Mit dieser Einstellung kann das Video in den Hintergrund eingeblendet werden, sodass andere Elemente auf der Seite darüber angezeigt werden können.

Zusätzliche Hinweise:

• Sie können auch den Parameter wmode=transparent anstelle von Opaque verwenden, obwohl dies bei einigen zu Transparenzproblemen führen kann Browser.
• Alternativ können Sie jQuery verwenden, um die URL aller Iframes auf Ihrer Seite zu ändern, bevor sie geladen werden, wie im Code-Snippet unten gezeigt:

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

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