CODEWITHSUNDEEP
jqueryyoutubefancyboxz-index
Dan
Dan

Reputation: 1295

youtube video sits above all other content ignoring wmode

I am asking this question of the back of a post a year or so ago.

YouTube Video Embedded via iframe Ignoring z-index?

I have a you tube video on a page. on that page I want to show a fancybox.. but due to the youtube video this doesnt work

I have added in the code

jQuery(document).ready(function (){
    jQuery('iframe').each(function(){
        var url = jQuery(this).attr("src");
            if (jQuery(this).attr("src").indexOf("?") > 0) {
                jQuery(this).attr({
                  "src" : url + "&wmode=transparent",
                  "wmode" : "Opaque"
                });
            }
    });
});

and that will get added to the code 

<iframe width="500" height="281" src="http://www.youtube.com/v/TUNROkqBte4?theme=light&showinfo=0&modestbranding=0&border=0&fs=1" frameborder='0'></iframe>

which i cannot change.

why would this still be happening in ie7/8 with the added jquery?

Thanks

Upvotes: 0

Views: 291

Answers (1)

JFK
JFK

Reputation: 41143

The issue is that the youtube's URL format :

http://www.youtube.com/v/...

... is not the proper one to be used within an iframe tag.

The proper format for iframe should be :

http://www.youtube.com/embed/...

If you cannot change it, then replace it on the fly using the javascript .replace() method like : 

jQuery('iframe').each(function () {
    var url = jQuery(this).attr("src").replace(new RegExp("/v/", "i"), '/embed/');
    if (jQuery(this).attr("src").indexOf("?") > 0) {
        jQuery(this).attr("src", url + "&amp;wmode=opaque");
    }
});

That should do the trick. See JSFIDDLE

Upvotes: 3

Related Questions