Z-index not working for Embed Code

4 Views

While scrolling my web page a DIV which have a video is not going behind the top DIV.
On my web page a top DIV,which have folloing css styling 

#header{
font-size:11px;
height:25px;
position:fixed;
top:0;
width:960px;
z-index:1000;
}

Now after clearing all floated element,I added a video on a wrapper DIV like same as this way..

Read More
<div id="vedio">
<object>video code</object>
</div>

Applying CSS 

#vedio{
position:relative;
text-align:center;
z-index:0;
}

After doing all stuff video is not going behind header in FireFox3.6,Google Chrome.Please Someone Help me out.
Thank you

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. Which Browser are you testing in? IE has z-index:0; issues, always start with 1 or -1 and go from there.

    Edit:

    Add this to your object:

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

    and this to your embed:

    wmode="transparent" and remember to close your embed tag with either </embed> or seeing as you’re using XHTML doctype: />. I added these in firebug and it works fine 🙂

    <object width="606" height="385">
            <param name="movie" value="http://www.youtube.com/v/RjUIarUAioY&hl=en_US&fs=1&color1=0x2b405b&color2=0x6b8ab6"></param>
            <param name="allowFullScreen" value="true"></param>
            <param name="allowscriptaccess" value="always"></param>
            <param name="wmode" value="transaprent"></param>
            <embed src="http://www.youtube.com/v/RjUIarUAioY&hl=en_US&fs=1&color1=0x2b405b&color2=0x6b8ab6"
                   type="application/x-shockwave-flash"
                   allowscriptaccess="always"
                   allowfullscreen="true"
                   width="606" height="385"
                   wmode="transparent">
            </embed>
        </object>

    You also had z-index; 999; on #wp-admin-bar *, I added it to the parent; #wp-admin-bar .padder just to make sure the children would inherit the value.