523 posts
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Denmark
  • Exclusive Author
+5 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!

454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
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
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Denmark
  • Exclusive Author
+5 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