HTML : play a video inside an image

Question

I'm trying to play a video inside a PNG image of a TV so that the TV serves as a frame for the video.

I tried something like that, but it just pushes the TV image up and plays the video underneath.

<img class="tv" src="images/tv.png" alt="Tv">
  <video width="320" height="240">
    <source src="video/video.mp4" type="video/mp4" />
  </video>
</img>  

Can you help me finding my way in there ? Because I'm sure there is an easy solution, but i really don't know where to look. Thank you so much !

Answer 1

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!

Answer 2

Bootstrap embed video inside image:

HTML Code:

/* Example 1 */
<div class="container">
    <div class="row">
        <div class="col-sm-12">
        <div class="laptop-wrapper">
            <iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
        </div>
        </div>
    </div>
</div>

/* Example 2 */
<div class="container">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
        <div class="desktop-wrapper">
            <iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
        </div>
        </div>
    </div>
</div>

 /* Example 3 */
<div class="container">
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-image: url(' http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png'); background-repeat:no-repeat; width:900px; height:758px; padding:80px;text-align:center;">
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="header-unit">
            <div id="video-container">
                <video autoplay loop class="fillWidth">
                <source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
                <source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
                <source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
                Your browser does not support the video tag. I suggest you upgrade your browser.
                </video>
            </div>
            </div>
        </div>
    </div>
</div>

CSS:

/* 1st example */

div.laptop-wrapper {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
div.laptop-wrapper iframe {
    box-sizing: border-box;
    background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 11.9% 15.5% 14.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 2nd example :  BACKGROUND IMAGE */
div.desktop-wrapper {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
div.desktop-wrapper iframe {
    box-sizing: border-box;
    background: url(http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png) center center no-repeat;
    background-size: contain;
    padding: 3.4% 10.8% 18.6%;/* 11.9% 15.5% 14.8% */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 3rd example :  BACKGROUND IMAGE */
.header-unit {
    height: 150px;
    border: 2px solid #000;
    border-right:none;
    border-left: none;
    position: relative;
    padding: 20px;
}
#video-container {
    position: absolute;
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
}
video {
    position:absolute;
    z-index:0;
}
video.fillWidth {
    width: 100%;
}