Lightbox on top of video?

[papa_face]

Hello,
I have a script on my site at the moment.
I have a script installed where you can click on an image and it will load the image in a lightbox.
The problem I have is that I have flash videos on the page, and for some reason when the lightbox loads you can see them on top of it.
How can I stop this?

[ajsa52]

Probably you need to adjust the z-index of your lightbox or your flash.

The specs define 7 painting layers. Starting from back to front, they are:

1. The borders and background of the current stacking context
2. Positioned descendants with negative z-index
3. Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
4. Floating descendants and their contents
5. Nonpositioned inline content
6. Positioned descendants with no z-index, z-index: auto, or z-index: 0
7. Positioned descendants with z-index greater than 0

Take a look at this page for more info: Overlapping and ZIndex (http://css-discuss.incutio.com/?page=OverlappingAndZIndex)

[papa_face]

I have no idea how to correct it lol. Do you think you could correct it for me?
Or anyone for that matter.

[ajsa52]

Try this: add the property z-index="999" to the element with your flash video (<object>, <embed>, or whatever). If that doesn't work, try with z-index="0"

[papa_face]

<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject("../player/flvplayer.swf","single","300","300","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","/<?php echo $path; ?>");
s1.addVariable("image","preview.jpg");
s1.addVariable("bufferlength","15");
s1.write("player1");
</script>
Thats the code I have for my player. Where would I put that z-index thing?

[ajsa52]

I'm not sure because it's a dinamic object, but you can try adding a div outside your script with that z-index:


<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<div z-index="0">
<script type="text/javascript">
var s1 = new SWFObject("../player/flvplayer.swf","single","300","300","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","/<?php echo $path; ?>");
s1.addVariable("image","preview.jpg");
s1.addVariable("bufferlength","15");
s1.write("player1");
</script>
</div>

[papa_face]

Nope that didnt work :(

[ajsa52]

Have you tried with "0" and "999" ?

[papa_face]

Yeah neither worked.

[papa_face]

Not to worry anymore, i changed my lightbox script and it works now :D