Youtube in iframe on facebook - Z-index issue

Question

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?

Answer 1

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.