Youtube to iframe on facebook - Z-index issue

Question

I have connected a Youtube video in my facebook application, but when I scroll down, youtube video floats over facebookmenu-bar. Which looks awful, see screenshot.

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

Has anyone else had this problem? If so, what did you do to solve it?

Answer 1

The problem is using the youtube inline frame. You need to add this to the query string of the URL so that it works correctly:

= transparent window mode

You will get something like this:

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

This will fix the z problem for embedded youtube videos sitting on top of all other windows and modals.

Answer 2

$(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.

Answer 3

I think this is a new mistake on facebook, as it happens in all the videos. Not that posters should be corrected or tuned.