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.