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 tutorial solving youtube z-index problem video covering dropdown menu

jQuery Code to Solve Z-index Problem on YouTube Iframe Video

$(document).ready(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];
        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.


  1. It doesn’t solve the problem in Google chrome or Internet Explorer! Only in Firefox

Leave a Reply