Solving Z-index Problem on YouTube Iframe Video using jQuery

A must-have feature on a WordPress theme is a dropdown menu, and it’s quite easy to make. But the problem arises when we put a YouTube iframe video just below the drop down menu, YouTube video overlaying the dropdown menu. It’s a z-index problem and we’ll solve it using simple jQuery code.
jQuery Code to Solve Z-index Problem on YouTube Iframe Video
$(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); }); });
This jQuery code will automatically modify the iframe youtube videos embed codes. I hope this short jQuery tutorial can be useful.
ie?
It doesn’t solve the problem in Google chrome or Internet Explorer! Only in Firefox
I’ve tested this code on Chrome and IE and I didn’t find any problems