First of all, you can't use <img> this way, because it's an element which can't contain other elements.
All you have to do is put your image as a background for div and then display video with correct position:
<div id="tv_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
<style>
#tv_container {
background: url('images/tv.png') no-repeat top left transparent;
width: 400px; /* Adjust TV image width */
height: 300px; /* Adjust TV image height */
position: relative;
}
#tv_container video {
position: absolute;
top: 30px; /* Adjust top position */
left: 40px; /* Adjust left position */
}
</style>
or instead of position: relative; and position: absolute; you can use margin: 30px 0px 0px 40px; for #tv_container video (but trick with position is better when you want to add more element into #tv_container.
I assumed that TV image is bigger than video, but you have to adjust few things to display it correctly.
Inspired by Guilherme J Santos' answer, I suggest you to use TV image as layer over the video, because in this way you can use image with tv screen which doesn't have to be strict rectangle. Of course part of video will be cropped then, but it will look like tv screen.
<div id="tv_container">
<video width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
</video>
</div>
<style>
#tv_container {
width: 400px; /* Adjust TV image width */
height: 300px; /* Adjust TV image height */
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('images/tv.png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px; /* Adjust top position */
left: 40px; /* Adjust left position */
z-index: 5;
}
</style>
Be sure z-index of the layer (which in this case is #tv_container:after pseudo-element) is greater than video's z-index. And there's one thing: your video will not be clickable (because it's under the layer) According to @brichins's comment it's also possible to make video clickable under the layer (thanks!).
Of course screen part of the tv must be transparent!
