View Full Version : How can we put an image in front of a video?

01-08-2011, 07:32 PM
Hi Again!

We have lots of questions we've been saving for the end and this is one of them.

We have a site under construction with a application/x-shockwave-flash media player on it. We want to hover a logo in front of the image near the top instead of above or below the player. So the logo will be in the box the video is playing in. Is there a way to put an image directly in front of a video in DW so the video plays uninterrupted behind it? I guess you could say the video is "sent back" and the logo is in front. I would post the code but it doesn't look the same. I guess we are trying to put one thing in front of another and all we know how to do is 2 dimensional. No two objects can occupy the same space doing it the way we know how. Does that make sense?

Thanks! CHunter :)

01-08-2011, 10:34 PM
I think you mean a poster image for the video. An image that shows untulnthe video is played.

01-09-2011, 05:51 PM
Hi There!

I mean is it possible to put an image in front of a video so it is just over one corner. Say you want your webpage logo to appear in front of the top right of your video just like Justin TV's does on theirs. We are working on something but it was made for us by someone else. We want that same affect as they achieved.

I Appreciate You Time!!! :)

01-10-2011, 04:00 PM
If it is a flash video, add the image in flash.

If it's an image, like on justin.tv, you can just position a little icon or image wherever you want. Parent element position relative, and child element (the corner image) position absolute.

01-10-2011, 07:39 PM
Hi DoMedia!

Thanks for responding. I want it to be just like jtv as you said. I'm learing fast but am not advanced enough to understand the parent child and marking a position absolute yet. If it's not to time consuming for you, would you please show me how to do that using a code example?

Either way, thanks again for responding!!!

CHunter :)

01-10-2011, 07:50 PM
<div class="thumb">
<img class="icon">
.thumb {position: relative;}
.icon {position: absolute; top: 0; left: 0;} /* change this if you want the small icon on another corner, top|bottom and left|right

I don't know your level of knowledge, but this is the basics.