Back To Resources

Fix YouTube iFrame Overlay and Z-Index Issues

This was posted on 02/22/2011 and was filed in Tips And Tricks, How-Tos | (63 Comments)

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:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg" frameborder="0" allowfullscreen></iframe>

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.

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg?wmode=opaque" frameborder="0" allowfullscreen></iframe>

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

Have I Helped You? Share Some Love!

Comments

Showing All Comments

Deow on 09/06/2012:

Thank you sir.

tintinboss on 07/03/2012:

OMG!!! Simply amazing. U know what, google ranking is not good enough yet. This should be the first page first result! Awesome! I spent almost 2 hours for this and finally! this! You rock \m/

GPomar on 06/29/2012:

Hey all, it's not the iframe tag that renders on a high z-index, it's flash. Flash doesn't care about the iFrame, it just wants to be on top. The wmode=opaque adhere's the flash object to the page, thus "fixing" the z-index issue... just 2 cents worth :)

Daniel Miller on 06/20/2012:

Just what I was looking for, thank you!

jair on 06/18/2012:

This worked for me even in chrome:

<script>
$(document).ready(function() {
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=opaque";
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);
});
});
</script>

Axel on 06/05/2012:

Thanx a lot !!!!!! :)

I got mad for 12 hours, trying to understand why Chrome displayed this f*** Youtube iframe embed above everything, whereas the div containing the iframe and the iframe itself were stylesheet and inline hidden.

I still don't understand why Chrome displayed it, but your tip solves the problem, so I can now focus back on the website design instead of this ugly Chrome's bug.

Have a nice day !

Lalit Joshi on 06/02/2012:

Thank You so much....

Varpa on 05/29/2012:

Thank you! I love you. Maybe my hair can grow back now

sivaguru on 05/23/2012:

In Aspx URL have below SWFOBJECt

In iframe object
<script type="text/javascript">
var so = new SWFObject('playerer.swf','mpl','640','360','9.0.98');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen', 'true');
so.addParam('flashvars', );
//so.addParam('flashvars'');
so.write('playerer');
</script>



I call above aspx page in Iframe into my page ..I not able to do any chnage in above URL


I need to set that thrid party URL iframe player set to wmode =transparent in my page ..



Please tell me the code in javacript

sivaguru on 05/23/2012:

In Aspx URL have below SWFOBJECt

In iframe object
<script type="text/javascript">
var so = new SWFObject('playerer.swf','mpl','640','360','9.0.98');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen', 'true');
so.addParam('flashvars', );
//so.addParam('flashvars'');
so.write('playerer');
</script>



I call above aspx page in Iframe into my page ..I not able to do any chnage in above URL


I need to add wmode =transparent in my page ..



Please tell me the code in javacript

Jon Daley on 04/26/2012:

Thanks!

I was adding the wmode parameter manually, and it still wasn't working. I finally figured out that it was tinyMCE/Wordpress that didn't count wmode as a valid parameter and was removing it. Argh.

But, the jQuery solution works. I thought I was trying to save time, by just doing it on the one problem video and then switch to javascript later...

Hopefully this method will continue to work in later/more broken versions of IE. Each new version has new ways of breaking the old broken behavior...

Litzor on 04/26/2012:

Muchas gracias bro, éste código ha sido el único que me ha servido, porque en español no aparece la solución...

5 Stars

Szed on 04/10/2012:

Hi !
Thanks, but not working on Chrome18 and FF12

http://www.heartjacking.fr/fr/41-t-shirt-equalizer

Anyone ?

Thanks !

Xylent on 03/18/2012:

I'm still trying to make this work in Chrome, none of the solutions seem to work. I am using Yahoo Pipes and js to put a newly uploaded youtube video from a channel into and Iframe. Nothing seems to be working for Chrome...

http://lovelogic.net/z_tuts/ytgrab1.php <--This is where I based it off.

Can anyone offer advise?

Beth on 03/17/2012:

Amazing.. you are my savior! Was looking every where for this solution.

Loopyl00 on 03/16/2012:

I so wish I'd thought of googling this 2 weeks ago, you saved the day, THANK YOU

Matt on 03/09/2012:

Great post. Thanks!

Emily on 01/18/2012:

Thanks for the solution, this was amazingly helpful.

Eric on 01/16/2012:

This helped me a lot. Thank you!

maxisawesome on 01/07/2012:

Federico - Awesome! Thanks much and glad to help.

Federico on 01/07/2012:

Thank you Max! It was so usefull that I translated it to spanish in my site http://corchoweb.com/2012/soluciones/arreglo-z-index-de-youtube-y-flash-encima-de-todo/
so more people can solve this.

Monderno on 12/23/2011:

Nice job, very helpful!

niko on 12/22/2011:

Thank you very much , i find the answer so long , when i look at your blog , i know the problem.
Sorry , my english is pool , in a word , i am very feel grateful : )

maxisawesome on 12/19/2011:

Hey webwitch you have the exact right idea with that. Sorry I didn't see your question in time!

webwitch on 12/13/2011:

I have now answered my own question - simply add an ampersand symbol:

<iframe width="320" height="256" src="http://www.youtube.com/embed/5ANcspdYh_U?rel=0&amp;wmode=transparent" frameborder="0"></iframe>

webwitch on 12/13/2011:

Thanks for this code. I would also like to put in the code to not show suggested videos. It's ?rel=0 but I am not sure where to put it in the code as it negates the ?wmode=opaque.
Any ideas? Thanks

Jona on 12/12/2011:

Thank you very much! Very helpful!

Japso on 12/02/2011:

Awesome!!! Great, great and super great, nice tip, U save many lifes qith this fu***ng piece of code. I love Y

Peter on 11/29/2011:

Thank you so much for this. I was trying to figure out why embedded youtube video was not getting overlayed for hours.

Andrew Minton on 11/26/2011:

Thanks for this awesome script! been looking for a solution to my oembed xml conundrum for ages! and this has solved it for me! thanks again! I'll pass on the love as much as possible and link to this from my blog too!

Ken on 10/24/2011:

Very helpful. Many thanks!!

Tidy Design on 10/21/2011:

AWESOME!!! You just helped me fix a bug on our 'About' page... Mega thanks! :)

Nancy on 09/30/2011:

Thanks for the share!
Nancy.R

Susan on 09/30/2011:

You star! Was pulling me hair out. Thanks a bunch, that worked for me in all browsers...

Leandro on 09/16/2011:

Nice!
Works fine for me.

Thanks

drew on 09/14/2011:

Thanks

Hitesh on 09/10/2011:

Excellent Post, its works great!! Thanks

zer0ruth on 09/06/2011:

Your last update works great for me, but it only works on the first instance of an iframe. Every other iframe on the site still floats over z-indexed elements

KJ on 09/01/2011:

Thanks from Holland!!! :)

James on 08/31/2011:

I'm really pleased some people have found a solution that works for them, but I can't get this working at all.

I'm running it as an include from php, but it's making no difference. I've tried different variations on all of the above snippets, but I'm seeing no change.

Am I meant to be doing it differently? I'm not a genius when it comes to JS, so if anyone can point me in the right direction I'd be so grateful!

The code I'm using is copied directly from Michael O's page - see below:


$(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);
});
});

Any help would be great! Thanks in advance!

brad on 08/25/2011:

Dude, thanks man. Finally some code that works!

Miokey on 08/19/2011:

My search has ended. Thank you for this valuable tip!!

lougie on 08/09/2011:

Thanks man!!! it took hours for me to search for a solution! great!

Sam Adodra on 08/06/2011:

Excellent. This solution worked for me. I tried to many different websites and it was such a simple solution in the end, one line of code. Thanks so much.

Michael O on 07/15/2011:

The code i have written on http://manual.contentmaker.dk/iframe/
is working just fine on IE8, IE9, Firefox and Chrome, and you don't have to link back to my site, i'm just happy for your help finding a solution :-)

maxisawesome on 07/15/2011:

Good catch - did you end up finding a 100% working solution? I'll post the updated code here and link back to your site.

Michael O on 07/15/2011:

I found out what why it didn't work. In your examble, you use ifr_source whatever there is a querystring or not. If i add: var newString = getQString[0]; and use this in the case where there is a querystring, then it is working. In your examble, it is adding the hd=1 to the end, but it is not removing it from the start. I have been writing the code here: http://manual.contentmaker.dk/iframe/

maxisawesome on 07/14/2011:

Hey - make sure you copy+paste it exactly. The modified code has a variable change. Working fine for me.

Michael O on 07/14/2011:

Sorry to say, but it is not working :-(
Firebug reports this:

ifr_source is undefined
if(ifr_source.indexOf('?') != -1) {

maxisawesome on 07/14/2011:

Try that!

Michael O on 07/14/2011:

The last update don't seem to work. As far as i know, the wmode has to be the first value, and in your examble it seems to be added at the end of the existing values?

maxisawesome on 07/14/2011:

Hey - check the update I just made. Should run the check for you.

Michael O on 07/14/2011:

Very nice tip, but it wont work if it is an HD video or some other options are included.
Ex: www.youtube.com/embed/lZqrG1bdGtg?hd=1&rel=0
Is there a way to modify the jquery to take care of this issue?

maxisawesome on 06/30/2011:

Hey, if it does not work in chrome try using 'wmode=transparent' instead.

Russ on 06/21/2011:

Thanks, however this does not appear to fix the problem in Chrome, any ideas?

maxisawesome on 05/28/2011:

Jayeast - Thank You! I'll add this to the post. Looks like it should work like a champ.

Jayeast on 05/27/2011:

for jQuery, find all iframe movies and modifies src attribute.

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

German on 05/17/2011:

Awsome and Simple!
Cool, tnx!

maxisawesome on 05/10/2011:

I'm glad this post has helped so many people out with this issue!

Bobby Digital on 05/10/2011:

Thanks for this post! I've already wasted a whole night trying to fix this issue through CSS and it just was not working. Thanks for a much simpler fix.

Michaelangelo Moran on 03/20/2011:

Oh man, dude, thank you so much, i've been researching up the ying yang for this solution, you're a life saver... thank you again

maxisawesome on 03/08/2011:

No problem. Glad to help!

Favio on 03/08/2011:

Excellent tip!! I was looking for a solution to this issue, thanks!!

Comment On This

Comments Have Been Disabled.

© Max Morgan Design 2009 - 2014 | Page Generated In 0.1018 Seconds Using 26 MYSQL Queries