Pinning a video to a page

User 265280 Photo


Registered User
1 post

Doubtless you have seen the Harry Potter movies where a photograph is animated. It seems it should be possible to get the same effect with a short video of someone waving at the camera or something and looping the video. But the effect requires framing the video with photo-mount corners. Also easy, except I can't get the video to go to the back or the photo-corners to come to the front. If they are pasted far enough away from the corner of the video to be shown fully, the effect of the video being mounted is lost.

It seems that it should be a simple enough exercise. Anybody got any ideas how?
David
User 463058 Photo


Ambassador
1,086 posts
Online Now

Is this what you have in mind? (Tape at the corners of the top video won't be visible in IE6 due to the type of image I used.)

(I removed the link as I had the sample page up long enough.)

You'll notice you can't click on the top vid because it's behind the graphic. This shouldn't be a problem if you're just using non-interactive flash animations.

In the code, the flash object is followed by the image. Both are contained within a div that is position:relative. The image is position:absolute, with the top and left distances set to zero. Margins on the top and left of the flash object position it behind the image.

To make the flash appear behind the image, you need to use

<param name="wmode" value="opaque">

If you have an embed tag, that will need this as an attribute-value pair:

wmode="opaque"

If javascript is being used, these will need to be included among the values being parsed.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.