Geek Answers Handbook

HTML: playing video inside an image

I am trying to play a video in a PNG image of a TV so that the TV serves as a frame for the video.

I tried something like this, but it just pushes the TV image and plays the video below.

<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 find my way there? Because I'm sure there is a simple solution, but I really don't know where to look. Thanks a lot!

+7
source share
3 answers

First of all, you cannot use <img> in this way, because it is an element that cannot contain other elements.

All you have to do is put your image as the background for the div and then display the video with the 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 the trick with position better if you want to add another element to #tv_container .

I assumed that the TV image is larger than video , but you have to configure a few things in order to display it correctly.

Inspired by Guilherme J. Santos's answer, I suggest you use a TV image as a layer on top of video , because in this way you can use an image with a TV screen, which should not be a strict rectangle. Of course, part of the video will then be cropped, but it will look like a 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>

Make sure that the z-index layer (which in this case is the #tv_container:after pseudo- #tv_container:after ) is larger than the video z-index . And there is one thing: your video will not be clickable (because it is under the layer) According to @brichins comment, it is also possible to make the video clickable under the layer (thanks!).

Of course, part of the TV screen should be transparent!

+6
source

You can set the image as a background div a little more than the video. Center the video in a div and you will see that the frame of the video is with an image.

 <div id="video_container"> <video width="320" height="240"> <source src="video/video.mp4" type="video/mp4" /> </video> </div>

CSS

 #video_container { background-image: url('images/tv.png'); height: 300px; width: 400px; } video { text-align: center; /* or padding: 30px 40px; */ }
+4
source

Try something like http://jsfiddle.net/CNj3A/

It consists of a div with a background image. I also set the padding attribute, so the borders of the tv image in the background will be displayed even with some other element inside the tvBorder div.

Inside, you insert whatever element you want. May be <video> , another <div> , a <image> , etc.

 <div id="tvBorder" style="background-image: url('http://cis.umary.edu/studentwebs/Fall%202009/Sandvig/ch4/tv_border.png'); background-repeat:no-repeat; width:625px; height:532px; padding:80px;"> <video>....</video> </div>​
+1
source

More articles:


All Articles