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:
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.
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.
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:
$("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:
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.
Have I Helped You? Share Some Love!
Comments
Showing All Comments
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!
Fatal error: Call to undefined function site_uses_member_system() in /home/mmd/public_html/support/template/comments.php on line 50
Deow on 09/06/2012:
Thank you sir.