YouTube Video Embedded via iframe Ignoring z-index

Question

I'm trying to implement a horizontal multilevel dropdown navigation menu. Immediately below (vertically) the menu, I've got a YouTube video embedded via iframe. If I hover over one of the main level nav items in Firefox, the dropdown menu properly appears on top of the video.

In Chrome and IE9, however, only a sliver of the dropdown is visible in the small region of space I have between the menu and the iframe. The rest of it seems to be behind the iframe.

The problem seems to be related to the YouTube video, not the iframe. To test, I aimed the iframe at another web site rather than the video, and the dropdown menu worked fine, even in IE.

• Question 1: WTF?
• Question 2: Why, even if I explicity put a z-index:-999 !important; on the iframe does this problem still occur?

Is there some internal CSS that the YouTube embed code includes that is somehow overriding things?

Answer 1

BigJacko's Javascript code worked for me, but in my case I first had to add some JQuery "noconflict" code. Here's the revised version that worked on my site:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Answer 2

Just add one of these two to the src url:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Answer 3

We can simply add ?wmode=transparent to the end of YouTube URL. This will tell YouTube to include the video with the wmode set. So you new embed code will look like this:-

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Answer 4

I have the same problem on YouTube iframe embeds only in internet explorer though.

Z-index was being ignored totally, or the flash video was just appearing at highest index possible.

This was what I used, slight adapting the above jquery script.

My embed code, straight from YouTube...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

The jQuery slighty adapted from the above answer...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Basically if you don't select Show suggested videos when the video finishes in your embed settings, you have a ?rel=0 at the end of your "src" url. So I've added the replace bit in case ?rel=0 exists. Otherwise ?wmode=transparent won't work.

Answer 5

Try adding wmode, it seems to have two parameters.

&wmode=Opaque

&wmode=transparent

I can't find a technical reason why it works, or much more explanation but take at look at this query.

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

or this

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

Answer 6

Joshc's answer was on the right track, but I found that it totally deletes the ?rel=0 querystring and replaces it with the ?wmode=transparent item - which has the effect of displaying the YouTube Suggested Videos list at the end of the playback, even though you originally didn't want this to happen.

I changed the code so that the src attribute of the embedded video is scanned first, to see if there is a question mark ? in it already (because this denotes the presence of a pre-existing query string, which might be something like ?rel=0 but could in theory be anything that YouTube choose to append in the future). If there's a query string already there, we want to preserve it, not destroy it, because it represents a setting chosen by whoever pasted in this YouTube video, and they presumably chose it for a reason!

So, if ? is found, the wmode=transparent will be appended using the format: &mode=transparent to just tag it on the end of the pre-existing query string.

If no ? is found, then the code will work in exactly the same way as it did originally (in toomanyairmiles's post), appending just ?wmode=transparent as a new query string to the URL.

Now, regardless of what may or may not be on the end of the YouTube URL as a query string already, it gets preserved, and the required wmode parameters get injected or added without damage to what was there before.

Here's the code to drop into your document.ready function:

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});