Video/Background

[florida_guy99]

I am not sure if this is the right place for this one question, but I am trying to do something pretty basic (LOL) and yet I can't think of how to do it.

I have an image with a white square in the middle and fog around the square. I have a video and I want the video to be exactly over the white square background image, like a framed picture with the fog around the video. It's a flash video, I dont knw if that's relevant.

How would you guys achieve that?

Thank you so much -- :)

[EasyTech]

Use absolute positioning. For browser oddities, make sure you set the margins and padding of the body element to 0.

You can use the zIndex style for when elements overlap each other. You can embed the video over white rectangle, but give the picture a zIndex of 0, and the flash video a zIndex of 50.

What may be cooler, is to make the picture a png, with a transparent rectangle instead of white. Reverse the zIndex, putting the picture in front of the video. This will do a better job of masking, and your viewport does not need to be rectangular!

However, some browsers don't like anything covering up flash, and it may interfere with controls, etc.

--Dave

[florida_guy99]

Sorry for taking so long to get back on this.

Thank you so much for your help, however, I can't seem to be able to get t he right position for the video.... on most monitors/browsers it will align perfectly, but it won't on other, like my own. But it's ok.

Thank you again.

[EasyTech]

One thing you may want to do in your css file, is set margins and padding of your body element to 0. Some browsers automatically give a "ring" around the content, others don't. This can seriously mess with positioning.

--Dave

[florida_guy99]

I did that.

Look www.pibland.com/bermudadunes

[EasyTech]

I see your image has an absolute position of left:339px, but your video has an absolute position of left:378px

--Dave

[florida_guy99]

And what should it be? Should I use % values?

[EasyTech]

They should be the same, shouldn't they?

[florida_guy99]

well they are not the same size and so if i set that the same the video will be aligned with the left edge of the "frame", right?
when u open, do you see the video right inside the "frame" ?

[EasyTech]

When I view it (Safari) I see the video offset to the right 30 pixels or so. Set the left edge of the video element to 359px. on Safari, it aligns up perfectly. Perhaps it will on other browsers as well.

[florida_guy99]

ok the "frame" image was set to center alignment, I've changed that, played with the numbers and now I tested in 4 different computers and it looks like it's perfectly aligned. Can you test it one more time?

I really appreciate your help!

[EasyTech]

You're welcome. It looks great on Safari (Mac) I highly suggest it, because of the Dev tools that come with it. I was able to change the position of elements on the fly with almost no work.

--Dave

[florida_guy99]

Thank you again. The final result is great. :)