youtube

How To Add Wmode Transparent Youtube iFrame or To Embed Code

Hi Friends, YouTube is very big video sharing website on which you can upload video and share it with anyone and anywhere. You can share videos on social network also share on websites via embed code.But sometimes when we add YouTube video to website it creates issue like JavaScript drop down menu come behind YouTube video,single menu hiding behind YouTube video. So may be you have same kind of issue with YouTube video.This error can be removed by adding wmode=transparent YouTube iframe or to YouTube embed code.

But problem is when you are using YouTube videos dynamically adding to site then we must write code by which wmode=transparent should be added dynamically YouTube iframe code/embed code. So each video of YouTube on your site by default have wmode=transparent added. So I am going to give you one code here which add wmode=transparent to each iframe of YouTube.

//Code to add wmode=transparent to each iframe src part
window.onload = function() {
    var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        frames[i].src += "?wmode=transparent";
    }
}

So above code can be used to add wmode=transparent to YouTube iframe. It is very simple JavaScript code. It searched iframe on window load and then add wmode=transparent to each iframe src part.

So when your videos will be loaded this code will find each iframe of your video and then add wmode=transparent to it and it will solve your problem of hiding JavaScript menus behind videos.

I hope this will help you to solve your issues regarding menu conflict with videos.Let me know in comments if anyone have suggestions or any problem.

I am PHP Freelancer, Hire PHP Developer India and PHP Freelancer India. If you have any projects related to WordPress or PHP you can contact me.