Play a <video> tag inside an <img> tag

html, image, video

Solution

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!

Problem

Original source