Search code examples
htmlcssflashyoutube

z-index vs <object> : is there any reason why this doesnt work on majors browser? (except Firefox)

I have this code :

HTML

<div class="box_video">
    <object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;"><param name="allowfullscreen" value="true" /></object>
</div>

<div class="box_fixed">
    My Text
</div>

CSS

.box_video 
{
    z-index: 20;
    height=400;
    background-color: #FF0000;   
    position:relative; 
}

.box_fixed {
    background-color: #2C2C2C;
    bottom: 400px;
    position: fixed;
    width: 100%;
    z-index: 40;
}

now, what I'd like to aspect is that the fixed div should be over the video (z-index of box_fixed is higher than box_video).

But in fact (expect Firefox) on IE/Chrome (for example) it is under.

Where am I wrong? Is there any special <object> attribute to care about?

Solution

  • One thing to try which usually works is to set the param:

    <param name="wmode" value="transparent">

    in the object tag.

    e.g.

    <object width="330" height="290" type="application/x-shockwave-flash" data="http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;f=user_uploads&amp;app=youtube_gdata&amp;rel=1&amp;border=0&amp;fs=1&amp;autoplay=0" style="visibility: visible;">
   <param name="allowfullscreen" value="true" />
   <param name="wmode" value="transparent">
</object>