img over <object>

[severndigital]

I am putting a ustream feed on my site.

 

I want the site to look like the cartoon character is holding the stream window

 

I have been playing around with z-index but can't seem to get it to work right.

 

Can someone help me?

 

 

here is what I have so far.

 

<div id="stream">
    <img src="images/right_flap.png" style="z-index:2;position:absolute"/>
    <div id="videofeed" style="z-index:1;position:absolute">
         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="586" id="utv526970" style="z-index:-1;"><param name="flashvars" value="autoplay=false&brand=embed&cid=2593430"/><param name="bgcolor" value="#000000"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="movie" value="http://www.ustream.tv/flash/mediastream/2593430"/><embed flashvars="autoplay=false&brand=embed&cid=2593430" width="480" height="586" bgcolor="#000000" allowfullscreen="true" allowscriptaccess="always" id="utv526970" name="utv_n_738783" src="http://www.ustream.tv/flash/mediastream/2593430" type="application/x-shockwave-flash" /></object>
</div>
</div>

 

the page is here ... www.growingpirate.com

you will see the pirate hook and hat are supposed to lay over top of the video stream.

 

any help would be great.

 

Thanks,

C

 

 

 

 

 

 

[haku]

You have to set wmode = transparent in your flashvars. Google around, and you will find more details.

[severndigital]

thank you very much .. that worked perfectly.