Fix z-index issue on YouTube Video and Google Chrome

Have you experienced a z-index problem on YouTube videos when viewed on Google Chrome? A simple fix like adding wmode=transparent will solve the issue. But what if you have a lots of videos and it’s too late that you noticed this issue?

In addition, the transparent mode isn’t working on the new embed code of YouTube. As a result, you’ll get frustrated. The answer is here! Simple paste this code once anywhere on your site, but it will be better if it’s inside the <head> tag.

<script type="text/javascript">
$(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);
    });
});
</script>

This will fix the z-index problem on Google Chrome of all YouTube videos including the iframe code like the one below:

<iframe width="560" height="315" src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>

Hope it helps! Now you don’t need to add one by one on all embedded YouTube videos