Fix YouTube iFrame Overlay and Z-Index Issues

YouTube's new iFrame player is a nice refresh to the ugly embed code that we have been using, but if you are placing it on pages with content that overlaps or overlays on each other or uses things like lightbox, you may notice that the videos appear on top of content. It's very easy to fix the issue when we use the standard embed code by simply adding a paramater to the code itself. With this new code, we simply don't have the ability to edit the code directly, but the YouTube team has made it easy for us to control this.

Default Embed Code:

Modified Embed Code:

To fix this, we simply add a small snippet to the end of the URL to let the page know that we want it to add these paramaters. Add "?wmode=opaque" to the end of the URL.

Hope this helps someone - took me a while to find it. Enjoy!
Update: If this doesn't seem to work in Chrome, try wmode=transparent instead of wmode=opaque!

Update 2: Automate This With jQuery!

A user posted a jQuery code snippet in the comments that allows us to dynamically make this change! I have not tested this personally, but it looks like it should work fine - jQuery is required for this to work and I reccomend posting this in a $(document).ready(); function or at the bottom of your page.

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

This code will automatically apply itself to EVERY iframe element - so if you use iframes frequently ( Facebook Like Buttons, anyone? ), you may want to use jQuery to check to see where the URL is coming from. This is a basic snippet posted to get you started that will take every iframe on the page and adds '?wmode=transparent' to the end of it - it's quick and easy!
Update Again: This code snippet will check to see if there is already a query string present - if so, it will simply append the new string and value pair.

$("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
});

Update To That: If you want to place our wmode parameter to the beginning of the query string, we can do something like the following:

$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});

(Thanks to Michael O for perfecting that last snippet.

Update 3: Concatenating With An Existing String

As one of my readers points out, some of your URLs will already have a query string attached. As an example:

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

If you were to attach "?wmode=opaque," it probably would not work. To get around this, simply use an & instead of a ? to add on to what we would call the query string.

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

 

(http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/)