How to make a Div (Lightbox) appear over a Flash / Youtube embedded video

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

<param name="wmode" value="transparent" />

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! 🙂

Leave a comment

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.