Do you have a Flash / Youtube video on your website, and have you ever tried to put a Lightbox on top of everything on your site?
It is usually said that flash loads on top of everything. What a flash plugin does is, instead of being displaying inside the browser, it actually makes a new window on top of the browser which synchronises it’s position with where you’d expect the flash to be.
You won’t be able to get a div to appear on top of a flash even if you set the z index of the flash to 0 and that of your lightbox to any higher value.
Actually, we can solve this problem by simply adding an extra parameter to the flash and force it to render in a different window mode. And the window mode that we are gonna use is “transparent” (opaque).
How to add this param to a flash
swfobject.addParam("wmode", "transparent"); or
How to add this param to a Youtube embed url
In the embed code add a extra param “wmode=transparent” to the src url.
Example:
src="http://www.youtube.com/embed/XXXXXXXXX?wmode=transparent" If you can’t get this to work, then use ‘opaque‘ instead of ‘transparent‘.
Hope, it helps! 🙂