frames behind pictures?

Question

Hey there, my question is related to HTML, and PURE html. im working on a new design for my front page on a social network called kwick, and i want to create a kind of space for my favorite Video at the moment.

now my problem is, how do i realize sth like this:

i take a picture of my ipod like that(just an example, its not my ipod) http://www.clein-online.de/schmuck_projekte/files/ipod_nano_schutzhuelle.jpg

now i want to create this pic as gif and cut out the display, now behind that cutten out area, there should be a youtube video be shown, in a way that the embed player is NOT shown completly, i mean, the player is there completly, but the picture is a layin on it.

does some1 has a idea how to do this?

thanks in advance!!

Answer 1

Your biggest hurdle will be ensuring that your WMODE = transparent. Setting WMODE to transparent will keep your flash crap from always appearing on top of other content. Then, simply position an image with transparency in the correct place over the video.

Since you haven't included any information on how precisely you're including your flash file, I can't really tell you what method you'll need to use to set the WMODE. Just do some googling, and all will be clear.

Answer 2

You don't need to cut the image at all. Make a div that has enough space for the whole picture of the ipod and use CSS to make it the background image (can be inline styles if you can't add your own CSS files).

<div style="background:url(ipod.jpg); width:300px; height:400px;">
    <iframe src="..." style="margin: 25px auto 0;" width: 250px; height: 200px;></iframe>
</div>

Apply margin, width and height to your iframe or embed or object to position it within the div that has the ipod background image.

You can set the iframe to the size you need and make it hide any overflow if necessary but I don't think you're going to be able to hide parts of the flash if you don't have control of the embed code.