YouTube video content covering CSS drop down menus in IE < 9

Question

I've created drop down menus using CSS and I have a YouTube video placed in a box just below my nav bar. When using IE 8, the drop down menus fall behind the YouTube video, despite the fact that the div with the nav bar has a higher z-index than the div with the YouTube video. The problem does not exist in Firefox, Safari or IE9.

You can see the problem by going to the web site:

http://www.mensdiscipleshipnetwork.com

Thanks for the help.

Answer 1

It looks like you need to add ?wmode=transparent to the YouTube embed iframe src url. Like so:

<iframe width="632" height="390" src="http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Answer 2

You can add that parameter automatically to all iframes src like so:

$(document).ready(function()
    {
        $('iframe').each(function()
        {
               var url = $(this).attr("src");
                var char = "?";
              if(url.indexOf("?") != -1)
                      var char = "&";

                $(this).attr("src",url+char+"wmode=transparent");
        });
    });

Answer 3

If you are using embed, wmode needs to be an attribute rather than part of the URL wmode="transparent"

Answer 4

If you're using the iframe API you can add it like this (note the last param in the playerVars object):

player = new YT.Player(playerID,
        {
            width: '100%',
            height: '100%',
            videoId: vidID,
            playerVars: {
                controls: 2,
                autohide: 1,
                showinfo: 0,
                modestbranding: 1,
                wmode: 'transparent'
            }
        });