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 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 zur URL des eingebetteten Videos hinzu:

&wmode=Opaque

Diese Einstellung ermöglicht, dass das Video in den Hintergrund eingeblendet wird. Dadurch können andere Elemente auf der Seite darüber angezeigt werden.

Zusätzliche Hinweise:

• Sie können auch den Parameter wmode=transparent anstelle von Opaque verwenden. Allerdings kann dies bei einigen Browsern zu Transparenzproblemen führen.
• 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");
    });
});