Layering an embedded YouTube video over an image?

Get Started
1

This site, http://healermedia.com/, has an embedded video layered over a TV screen image. The only script I noticed it had for this:

<iframe width=“249” height=“140” src=“http://www.youtube.com/embed/1b-0BHlo5Zg?rel=0” frameborder=“0” allowfullscreen></iframe>
<img src=“css/images/screen.png” alt=“” />

I copied that put it on my test site, http://appsumo.gamegeargenie.com/ I modified the screen image with GIMP, so the screen view size changed a little. Making the scrip I used:

<iframe width=“246” height=“156” src=“http://www.youtube.com/embed/c-dTtBd8mN0” frameborder=“0” allowfullscreen></iframe>
<img src=“http://appsumo.gamegeargenie.com/css/images/screen.png” alt=“” />

The image ends up below the embedded video, not overlapping. Can anyone help me figure this out?
Thanks to the community!

D. Fox

2

Hi scripterd. Welcome to the forums. :slight_smile:

You haven’t replicated all the CSS that the other site used. Try adding in these styles:

.item {
  position: relative;
}

.item iframe {
  position: absolute; 
  top: 21px; 
  left: 27px;
}