Question

My question is related to HTML, and PURE html. I am 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 something 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 picture 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 completely, i mean, the player is there completely, but the picture is a lay in on it.

How to do this?

Answer 1

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.