Youtube videos underneath a thickbox or lightbox displaying

Question

I have some embedded youtube videos and I have a div that appears over the top of the rest of the page. The problem is, that without adding some extra params (wmode=opaque) to the youtube embed code, the youtube videos appear above the lightbox.

Is there a better way of achieving this? Like some kind of CSS I can add to the lightbox div?

Note: i'm not using lightbox or thickbox specifically, just my own basic code. The css I'm using for my lightbox div is:

#shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: 000;
z-index: 1001;
}

Answer 1

Unfortunately flash takes precedence over any z-index that you set. It's a bit of a pain, but the only way you can do it is using wmode. See this answer. If you don't want to, or can't set wmode in the YouTube element then there are a number of dirty hacks that you can do.

NB THESE ARE DIRTY JS HACKS

• Hide the video before the lightbox is displayed, then show it on exit
• Replace flash object with a static image when lightbox is displayed. Change back on exit.
• Use a flash overlay instead of html one

DON'T DO THIS

Answer 2

You can append

?wmode=opaque

at the end of the link to the youtube video

Source: http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/