lostprophetpunk Posted November 11, 2010 Share Posted November 11, 2010 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. Link to comment https://forums.phpfreaks.com/topic/218393-z-index-and-embedded-youtube-videos/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.