/    Sign up×
Community /Pin to ProfileBookmark

Video/Background

Copy linkTweet thisAlerts:
Nov 24.2009

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 — ?

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@EasyTechNov 24.2009 — 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 [I]in front of[/I] 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
Copy linkTweet thisAlerts:
@florida_guy99authorDec 03.2009 — 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.
Copy linkTweet thisAlerts:
@EasyTechDec 03.2009 — 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
Copy linkTweet thisAlerts:
@EasyTechDec 03.2009 — I see your image has an absolute position of left:339px, but your video has an absolute position of left:378px

--Dave
Copy linkTweet thisAlerts:
@florida_guy99authorDec 03.2009 — And what should it be? Should I use % values?
Copy linkTweet thisAlerts:
@EasyTechDec 03.2009 — They should be the same, shouldn't they?
Copy linkTweet thisAlerts:
@florida_guy99authorDec 03.2009 — 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" ?
Copy linkTweet thisAlerts:
@EasyTechDec 03.2009 — 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.
Copy linkTweet thisAlerts:
@florida_guy99authorDec 03.2009 — 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!
Copy linkTweet thisAlerts:
@EasyTechDec 03.2009 — 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
Copy linkTweet thisAlerts:
@florida_guy99authorDec 03.2009 — Thank you again. The final result is great. ?
×

Success!

Help @florida_guy99 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...