Z-index doesn't work for Embed code
When scrolling through my web page, the DIV that has the video does not follow the top DIV. On my webpage, the top DIV which has the following CSS style
#header{
font-size:11px;
height:25px;
position:fixed;
top:0;
width:960px;
z-index:1000;
}
Now, having cleared all the floating element, I added a video on the DIV wrapper how to do this.
<div id="vedio">
<object>video code</object>
</div>
Applying CSS
#vedio{
position:relative;
text-align:center;
z-index:0;
}
After all the other video doesn't follow the title in FireFox3.6, Google Chrome. Please help me. thank you
a source to share
Which browser are you testing? IE has problems z-index:0;
, always start with 1
or -1
and go from there.
Edit:
Add this to your object:
<param name="wmode" value="transparent">
and this is for your implementation:
wmode="transparent"
and do not forget to close your embed tag with the help </embed>
or see how you're using XHTML doctrine: />
. I added them to firebug and it works great :)
<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
to make sure children inherit the meaning.
a source to share