Why Does My Dropdown Menu Appear Behind an Embedded YouTube Video in Chrome and IE9?

YouTube Video Embedded via iframe Ignoring z-index?

In an attempt to create a horizontal multilevel dropdown navigation menu, a user faced an anomaly where the dropdown menu failed to appear on top of an embedded YouTube video in Chrome and IE9 (whereas, it worked in Firefox). The issue was isolated to the YouTube video itself, not the iframe technique used.

Question 1: Why the Discrepancy?

Even with an explicitly set z-index:-999 !important; for the iframe, the dropdown menu remained obscured behind the video. This suggests a CSS interference within the YouTube embed code.

Question 2: Resolving the Problem with wmode

To rectify the situation, adding wmode to the YouTube embed code seems to resolve the issue. Specifically, the following parameters can be utilized:

• &wmode=Opaque
• &wmode=transparent

The technical reason behind why this solution works remains obscure. However, the following code example illustrates its implementation:

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

Alternatively, the following jQuery code can be deployed to fix the z-index problem for all iframes on a page:

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

By employing the wmode parameter, the YouTube embed code can be tailored to behave as expected, allowing the dropdown menu to appear on top of the embedded video in all major browsers.

The above is the detailed content of Why Does My Dropdown Menu Appear Behind an Embedded YouTube Video in Chrome and IE9?. For more information, please follow other related articles on the PHP Chinese website!