YouTube's new iFrame player is very good to the old embed code that we have been using, but if we are placing it on pages with content or lightbox then the youtube's iframe player overlaps or overlays on each other, you may notice that the videos appear on top of content or lightbox. 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.
As this problem of Overlaying can be solved easily by adding a parameter "?wmode=transparent" without quotes to the end of the src link of iframe tag.
For Example,
But, we cannot add it manually in dynamic websites where the src of iframe tag changes on every page. So, in oreder to solve this problem you can use jquery which can add this to all iframe tags.Check the below example,
Please Note:- If you have got the solution then please don't forget to like and share this post to others.
As this problem of Overlaying can be solved easily by adding a parameter "?wmode=transparent" without quotes to the end of the src link of iframe tag.
For Example,
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg?wmode=transparent" frameborder="0" allowfullscreen></iframe>
But, we cannot add it manually in dynamic websites where the src of iframe tag changes on every page. So, in oreder to solve this problem you can use jquery which can add this to all iframe tags.Check the below example,
$(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);
});
});
Please Note:- If you have got the solution then please don't forget to like and share this post to others.