Mengatasi Problem Z-index pada Video Iframe YouTube dengan jQuery

Salah satu fitur yang harus ada pada theme WordPress adalah drop down menu, dan kita bisa membuatnya dengan mudah. Tetapi masalah muncul ketika kita menaruh video YouTube tepat dibawah drop down menu dengan embed iframe. Menu drop down akan tertutup oleh video YouTube. Ini adalah masalah z-index dan ini bisa kita atasi dengan sedikit kode jQuery.

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

Kode jQuery untuk Mengatasi Problem Z-index pada Iframe YouTube

$(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);
    });
});

Kode jQuery diatas akan secara otomatis memodifikasi kode embed video YouTube yang berupa iframe. Semoga tutorial jQuery yang singkat ini bisa bermanfaat, selamat mencoba.

One Comment

  1. terimakasih tutorialnya, sangat bermanfaat 🙂

Leave a Reply