CSS overlay problems, showing a splash page over flash element

Question

Check out the link below, as you can see my overlay is hidden behind the flash element. However, the blue bar with the 'Continue' button appears above everything. Does anyone know what CSS changes I need to make so the overlay will appear above everything below it? The background loads an iframe. Thanks.

http://honr.it/s4j

I can't add wmode="transparent" to the embed tag, since I have no control over the page loaded in the iframe.

Answer 1

i think your link is broken or is it really to a yahoo video of 'associated press'?

Answer 2

AFAIK you need to set the wmode of the Flash player to "transparent" in order for this to work. Along with that you need something like as your CSS:

#popup {
    position: relative;
    z-index: 1;
}

#flash-player {
    position: absolute;
    z-index: 0;
}

Basically, the z-index property needs to have value lower than the popup.