How do I overlay an image over video.

[Taz Devil]

Hi all, hope someone might be able to help with this problem.I am setting up a streaming web cam that I will be placing into my snakes vivarium, this will let people view the snake 24/7.What I am trying to do is embed the video into a web page and then overlay a transparent png image to create a decorative frame for the video.I have posted 2 pictures of what is happening and what I want.This is how I would like it to look (the purple area is where the video would show through the transparent area of the overlayed image.This is how it looks when I try and lair it using Z-Index.This is a link to an example of what I have currently got. I know there isn't a video to play as this will be a link to the live web cam once I have it setup.http://www.tazworld.co.uk/snakecam/index.htmlI have staggered the image in this example so that I knew if it had loaded or not.Any help or advice would be greatly apreciated.Thanks in advanceRob

[dsonesuk]

take the snakes head within the purple area, make the purple area transparent.#outer {width: 618px; height:440px; position:relative; z-index:10;}#snakehead_overlay {width:478px; height:360px; position:absolute; z-index: 20; left:10px; top:10px;}<div id="outer"><div id="snakehead_overlay">embed movie here</div></div>now this might not work, because as the movie is running, it may take precedence over the snake head.

[justinbriggs1]

Here is an example of overlaying a div on top of a flash video:http://www.malcolmfontier.com/mojito/The overlayed image is the placeholder before the video starts, and actually disappears on click because of some JS, but the principle is the same:

<div id="video-overlay"></div><object>(your object code)</object>#video-overlay {background:url("images/videoplace.jpg") no-repeat scroll 0 0 transparent;height:284px;position:absolute;width:504px;z-index:9999;}

Should look good in all browsers. You would also have to use a png for transparency instead of a jpg.

[Taz Devil]

Thanks for all the advice given. Unfortunately I have tried both ways to get the image to appear on top of the video.I have uploaded a quick example of the picture. This is not my snake as I am waiting till she has shed to get her out and try to take a picture while she is on a white sheet.It seems that when the video loads the actual video layer becomes the top layer. I have activated the controls on the video player and they seem to be on a lower layer which allows the snakes head to show. My web cam will not have any controls as it will be constantly streaming live footage so these are not required.Once again thanks for the advice up to press.If the worse comes to the worse I will just have to create a frame type background for the video like I did for the Phasmid Cam I had up and running a year or so ago. (http://www.tazworld.co.uk/webcam/)