Youtube Video overlay

HTML & CSS
1

Hey I’m currently building a site which has a YouTube video embedded and would like to have an overlay going over the top of it ie a TV. I have the TV cut out in PNG format already but unsure of where to go from here.

Thanks in advance

Adam

2

You should be able to apply float: left; to the png image, then use the z-index CSS property to position it over the video.

3

You can put the video within a <div> and set the divs background as your tv cutout, then center the video within your div so it sits in the “cutout” area.

4

I’ve had with z-index Raptor and can’t get it working.

Code below:
<iframe width=“380” height=“290” src=“http://www.youtube.com/embed/jLM7Vids8ng” frameborder=“0” allowfullscreen style=“z-index:1; margin-left:40px;”></iframe>
<img src=“assets/tv.png” width=“428” height=“690” style=“z-index:2; margin-left:25” />

Bay that way wont work as the image had rounded corners!

Thanks :slight_smile:

5

One thing to note when using z-index is the element it is applied to has to be positioned (can be fixed, absolute or relative, doesn’t matter).

Try this for the HTML:

<div class="embed-video">
    <iframe width="428" height="390" src="http://www.youtube.com/embed/jLM7Vids8ng?wmode=opaque" frameborder="0"></iframe>
</div>

<div class="tv-frame">
    <img src="assets/tv.png" width="428" height="390" />
</div>

Notice the “?wmode=opaque” after the video url, this is important as without it the video holds preeminence over anything else on the page.

And this for the CSS:

.embed-video { position: absolute; z-index: -1; }

The only problem with this though, is now the image is over the iframe making it impossible to start and stop the video. The solution to this would be to place the png under the video using this same technique (depending on what your png looks like this may or may not work).

6

Aye your code worked but had the issue you said. Might have to re-design the TV Frame to have straight edges… ummmm thanks for your help :slight_smile:

7

You might be able to use the solution posted here which uses pointer-events:none for modern browsers (not opera or IE) and the alpha image loader for IE.

Alternatively you could use a square image cut out main image and then just overlay 4 small absolutely placed corners into place which will allow most of the element to still be clicked.