CODEWITHSUNDEEP
javascriptjquery
maxlk
maxlk

Reputation: 1057

YouTube iFrame z-index with jQuery colobox

I'm having a issue with youtube iframe z-index. when i use jQuery colorbox, youtube iframe seems to hide part of the colorbox. so i tried few JavaScript.

This works fine except in firefox 

<script>
$(document).ready(function() {
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=opaque";
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>

Then i tired this code. which seems to work fine on all browsers but google ads seems to stop working.

<script>
$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");

    for (var i = 0; i < frames.length; i++) {
         frames[i].src += "?wmode=opaque";
    }
});
</script>

Any help will be appropriated to fix this problem. Thanks in advance.

Upvotes: 1

Views: 248

Answers (1)

maxlk
maxlk

Reputation: 1057

I found the answer my self. Here is the code if anyone need it

(function ($) {
    $ = jQuery;

    $(function () {
        $video = $("#SomeDIV> iframe");
        $srcVal = $video.attr('src');
        appendedVal = $srcVal + "?wmode=opaque";
        $video.attr('src',appendedVal);
    });
 })(jQuery);

Upvotes: 1

Related Questions