Youtube in iframe on facebook - Z-index issue

4
votes

I've embedded a Youtube video in my facebook app, but when I scroll down, the youtube video floats above the facebookmenu-bar. Which looks kind of awful, see screenshot.

At first glance, the problem only shows in Chrome and Internet Explorer, not in Firefox. It seems to be a Z-index issue. I've tried adding &wmode=Opaque to my youtube-url, but no luck.

Did someone else have this problem? If so, what did you do to solve it?

enter image description here

3
facebookiframeyoutube

3 Answers

8
votes

The problem is with the embedded youtube frame. You need to add this to the query string of the url for it to work right:

wmode=transparent

You get something like this:

www.youtube.com/embed/xxxxxxxxx?wmode=transparent&rel=0

That will fix the z index issue of embedded youtube videos sitting on top of all other windows and modals.

1
votes
$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");

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

This code works for me.

-1
votes

I think this is a new facebook bug as it is happening to all video embeds suddenly. Not something posters should have to fix or tweak.