Solving Z-index Problem on YouTube Iframe Video using jQuery

jQuery | January 7th, 2012

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.

mengatasi masalah z-index pada iframe youtube dengan jquery dropdown menu tertutup video youtube

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.

4 Comments

  1. Eugene says:

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

  2. Elias says:

    I rarely comment, but i did some searching and wound up
    here Solving Z-index on YouTube Iframe Video using jQuery | Grafisia.
    And I actually do have 2 questions for you if it’s allright. Is it only me or does it look like some of these responses come across like they are coming from brain dead folks? :-P And, if you are posting at other social sites, I would like to follow anything new you have to post. Could you list of all of all your community pages like your linkedin profile, Facebook page or twitter feed?

Leave a Reply