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.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!var ifr_source = $(this).attr('src');
var wmode = "?wmode=transparent";
$(this).attr('src',ifr_source+wmode);
});
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: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);
});
$(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.$("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);
});
});
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/)
