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!

808 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
+5 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?

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by