Z-Index and Embedded YouTube videos?

[lostprophetpunk]

Hello there,

 

I have come across a problem whilst coding a website for a friend.

 

Basically, I have implemented a pure css popup for some images on the page. However, I want them to do display in a specified place (in which I have sorted out). This place is meant to be above a YouTube embedded video, but it appears to display underneath it.

 

Before you tell me to play around with the z-index of the object and the images, I have tried that but it hasn't worked. I need the images to display over the YouTube video.

 

Here is the CSS in question...

#preview { width: 940px; height: 100px; margin-top: 20px; }
#preview a { filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; margin-left: 10px; }
#preview a:hover { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

#footer { width: 940px; height: 30px; margin-top: 30px; margin-bottom: 30px; font-family: arial; font-size: 0.8em; color: #888888; text-align: center; }
#footer span { color: #ffffff; }

div.lb { display: none; position: absolute; top: 440px; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; text-align: center; background: url('images/screenbg.png'); }
div.lb:target { display: block; }
	/** IE doesn't support :target, so we use CSS expressions **/
div.lb { z-index: 99999; display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none'); }

 

Here is the HTML...

<object width='940' height='547' style='z-index: -9999;'><param name='movie' value='http://www.youtube.com/v/-FrbICttxGQ?fs=1&hl=en_GB&rel=0&hd=1'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='http://www.youtube.com/v/-FrbICttxGQ?fs=1&hl=en_GB&rel=0&hd=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='940' height='547'></embed></object><div id='preview'> 

<a href='#lb1' title='Click to View'><img src='images/bigpreview/i-s-rwc1.png' alt='Lightbox' width='140px' height='100px' /></a>
<a href='#lb2' title='Click to View'><img src='images/bigpreview/i-s-rwc2.png' alt='Lightbox' width='140px' height='100px' /></a>
<a href='#lb3' title='Click to View'><img src='images/bigpreview/i-s-rwc3.png' alt='Lightbox' width='140px' height='100px' /></a>
<a href='#lb4' title='Click to View'><img src='images/bigpreview/i-s-rwc4.png' alt='Lightbox' width='140px' height='100px' /></a> 
</div> 
<div id='lb1' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc.png' alt='' /></a></div> 
<div id='lb2' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc1.png' alt='' /></a></div> 
<div id='lb3' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc2.png' alt='' /></a></div> 
<div id='lb4' class='lb'><a href='#' title='Click to Close'><img src='images/bigpreview/i-b-rwc3.png' alt='' /></a></div>

 

If anyone could help, thanks in advance.