How To Embed Images Or Video In A Preset Images

I am writing a website intro page and really like the style on this page: http://www.davidhutton.com/ where there are moving images/video in another image like that. To simplify i

Solution 1:

According to your example you could solve it like this:

<style>div.container {
    width:          337px;
    height:         297px;
    padding:        25px35px0px28px;
    background:     url(http://www.officialpsds.com/images/thumbs/tv-screen-1-psd29071.png) no-repeat 00;
}

div.container > div {
    height:         189px;
    overflow:       hidden;
    border:         1px solid red;
}
</style><divclass="container"><div>
        This container should have a red border and fit's exactly the screen.
        You can replace or fill it with everything you want, for example an img-tag.
    </div></div>

Solution 2:

I'd actually set the TV image as a background image and position your other image inside the same container.

<div id="content">
    <img src="https://www.google.com/images/srpr/logo3w.png" />
</div>
​
#content {
    background-image: url('http://www.officialpsds.com/images/thumbs/tv-screen-1-psd29071.png');
    width: 373px; /* 400 - 27 for padding */
    height: 294px; /* 322 - 28 for padding */
    padding: 27px 0 0 28px;
}​

DEMO

Solution 3:

Well it's quite simple actually. You can use Chrome's right click > "Inspect Element" or FireFox equivalent to see that there is an image of a tv (as you've done) and a sliding images element that is:

position: absolute;
top: #px;
left: #px;

You can test this html/css with a simple image before you tackle the sliding images via jQuery or JavaScript