CODEWITHSUNDEEP
csslightbox
willdanceforfun
willdanceforfun

Reputation: 11240

Youtube videos underneath a thickbox or lightbox displaying

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;
}

Upvotes: 3

Views: 1880

Answers (2)

Dario Zamuner
Dario Zamuner

Reputation: 1041

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/

Upvotes: 2

Yule
Yule

Reputation: 9764

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

Upvotes: 2

Related Questions