523 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 1000+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 more
Zeplix says

Wasn’t quite sure where to post this, but I’ve ended up here! So hopefully it’s not entirely wrong!

So, while doing some advertising online, I came to a random point where I needed to do the following: For a one-page site, have an image as a background, and a youtube video on top of that image. Sure, easy enough, just have the image as a background image! But alas, here comes the problem: The background image needs to be clickable/contain a link. So basically, if you click somewhere else than the video, you’ll be clicking a link to a different part of the site.

Now, keep in mind: I’m a design guy, not a coding guy. My coding knowledge is fairly tiny.

So… how the heck do I do this? I’ve been going nuts with searching online for a tutorial or hints, but I can’t really figure anything out! I’ve found a few ways to have a youtube video on top of an image, but can’t figure out how to add a link to the image in that case. Likewise, if I can figure out how to add a link to the image, I can’t figure out how to add a video on top of it!

Any help would be super much appreciated!

751 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
Gareth_Gillman says
HTML:
<a id="image" href=""><img src="image.png" alt="" />
<div id="video">
 <iframe width="560" height="315" src="http://www.youtube.com/embed/PLgYDq2AMB0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</a>
CSS:
#image {
 height:500px;
 position:relative;
 width:500px;
}
#video {
 position:absolute;
 top:75px;
 right:75px;
 height:200px;
 width:200px;
}

Change all the numbers to your needs but the video should overlay the image.

523 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 1000+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+10 more
Zeplix says

Thanks Gareth, but alas, I’m still having some issues! Partly my own fault for not being more specific I suppose!

1) the image should function (except for the link) as a background image. Meaning, that if the browser becomes smaller, the image simply clips off. As it stands, the image shows in full no matter what. 2) I’m having trouble getting the video to be over the image. Sometimes it’s there, sometimes not. The best I got was that it was over the image, but positioned aaaaalll the way over to the right side of the screen, almost out of sight o0

Any clues?

by
by
by
by
by
by