YouTube Video Embeds and z-index Problems

When embedding a YouTube video using an iframe below a multilevel dropdown navigation menu, you may encounter issues where the dropdown menu appears behind the video in Chrome and Internet Explorer. While hovering over a main navigation item, the dropdown should appear on top of the video in all browsers.

Question 1: Why is the dropdown menu appearing behind the YouTube video in Chrome and IE9?

This problem is related to the YouTube video itself, not the iframe. YouTube embeds include internal CSS that overrides other CSS settings, including your z-index values.

Question 2: Why does setting z-index:-999 !important; on the iframe still cause the problem?

The overriding CSS in the YouTube embed code takes precedence over any z-index settings you apply to the iframe.

Solution:

To fix this issue, add the following parameter to the embedded video's URL:

&wmode=Opaque

This setting allows the video to blend into the background, allowing other elements on the page to appear on top of it.

Additional Notes:

• You can also use the parameter wmode=transparent instead of Opaque, although this may result in transparency issues on some browsers.
• Alternatively, you can use jQuery to modify the URL of all iframes on your page before they load, as shown in the code snippet below:

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