Jump to content

Can you add a click through link for a URL to a video?

Recommended Posts

Posted

Getting really close to dialing in the auto-play videos now and I'm curious if there is one possibility.

Can you add some sort of click through link on a video?

I'm doing an autoplay video from Vimeo. I read somewhere on how to hide the UI. Looks super clean.

I can figure out how to say bake a bit of text that looks like the button into the video itself. But I need to make it go somewhere. I'm really trying not to make it take the user to a new page. You know, a click-through link just like the pictures do?

What can be done here? I am open to getting crafty.

Thanks!

Posted

This is as far as I got tonight. It works on desktop but not on mobile. Probably due to screen size.

Maybe there are some ways I can improve this? Would love to actually just click the video instead of putting some HTML text over the top.

Thanks!

<div style="position: fixed; text-align: center; z-index: 1000; width: 100%; position: absolute; top: 1000px; height: 100%">  
<h2>
  <a href="https://www.sensebellum.com/the-sandbox-of-life">The Sandbox of Life</a>
  </h2>
  </div>

 

Posted (edited)

Well then I just ended up making a brand new code block on the page and starting with this.

I feel I am realllllly close. Trying to somehow wrap the iframe or div as a clickable thing as per this article.

I feel like it is possible I am just not that well versed at the exact syntax yet. Is that something that can be done?

Thanks!

<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/the-sandbox-of-life">
    <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
    </iframe>
  </a>
</div>

 

Edited by caseyscalf
Better code
Posted

For some reason it works on mobile sometimes.... Maybe the area to click is really small? It's not obvious why it only works some places.

Nothing on desktop yet.

Posted

Okay this is where I ended up. The first row of pixels is the link but not the video.

 

<div style="padding:56.25% 0 0 0;position:relative;">
  <a style="display:contents" href="https://www.sensebellum.com/the-sandbox-of-life">
    <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
    </iframe>
  </a>
</div>

 

Posted

Do you want to embed a video or click thru? The second goes to another page somewhere either onsite or offsite. The first stays on the page, but you can add your own custom thumbnail to the embedded video which in sense "clicks thru" to the video. None of this needs code other than the embed code. You may want to post a link to your site so folks can see what you are trying to accomplish. 

Posted

Hello. I need the user to click on the video and be taken to a new page.

How can we do this?

The code I posted is very close to working. Do you know how to tweak it to achieve this effect?

Or, do you know of another way to present a video on the website and turn it into a click-through link?

Thanks!

 

Posted (edited)

The simplest way if you are going to take the viewer completely offsite is to simply post an image block that clicks thru to the video url, instead of using the imbed code.  Vimeo and others won't allow full auto full screen playback from an Iframe, meaning I can't embed the video, with a thumbnail, and click it and get  full screen, I have to click the full screen icon after the video starts to play  to get it to open full screen.

Edited by derricksrandomviews
Posted

I'm not sure I'm being completely clear here.

There is going to be a video on my website. Someone's going to click it. It's going to take them to another page on my website.

Super simple. A video as a button.

How do you modify the code above to do this? As you can tell I am really close. The single line of pixels above the video is clickable and it takes you to the URL.

I'm just not getting the syntax right or something and it's not turning the entire video into a button.

How do I using the code block posted above make this so the entire video is clickable?

Conversely can I make a transparent rectangle as a button that lays over the top? then when they try and click the video, really a transparent rectangle that has a hyperlink in it, it will act as if they click the video and it was a button. Boom. It takes them to a new page on my website. Super simple.

We are going to do this and I would love if you had any insight.

 

 

Posted

Progress! I am able to make a transparent rectangle that takes the user to the new page! Woo! I learned about it here.

So the only problem is that the size of the rectangle does not change responsively like the video does.

How can we easily code for this?

<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:1000px; height:500px; z-index:5;"></a>
  <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
  </iframe>
</div>


 

Posted

Progress! I am able to make a transparent rectangle that takes the user to the new page! Woo! I learned about it here.

So the only problem is that the size of the rectangle does not change responsively like the video does.

How can we easily code for this?

<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:1000px; height:500px; z-index:5;"></a>
  <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
  </iframe>
</div>


 

Posted

BOOM! Nailed it. This is how you do it. Make the Width & Height 100%.

<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
  <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
  </iframe>
</div>


 

  • 1 month later...
Posted (edited)

Oh my gosh thank you so much for posting this. I have been scouring the internet to try to  figure this out. Now all I need to figure out is how to do a rollover state with text on them

Edited by dnnyc
  • 2 months later...
Posted

I am trying to acccomplish the same thing but am still not getting the desired outcome:

<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.kueatsfresh.com/recipes/p/mixed-seafood" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5vy9HeL8mOc?controls=0" frameborder="0" allow="accelerometer; autoplay=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The invisible clickable rectangle on top is not working for me. Could it be a youtube vs vimeo thing?

Posted (edited)
On 7/23/2020 at 2:07 AM, caseyscalf said:

BOOM! Nailed it. This is how you do it. Make the Width & Height 100%.



<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
  <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
  </iframe>
</div>


 

This IS NOT working for me on squarespace website.

Edited by EZEddie
typo
  • 2 months later...
Posted
On 7/23/2020 at 3:07 AM, caseyscalf said:

BOOM! Nailed it. This is how you do it. Make the Width & Height 100%.


<div style="padding:56.25% 0 0 0;position:relative;">
  <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
  <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
  </iframe>
</div>


Thank You! This is exactly what I was looking for 🙏 

 

  • 3 weeks later...
  • 2 months later...
Posted

Thank you for making this possible.

It almost work on my side but the video get sticked on the top left and I can't move it. I tried changing the "top" and "left" section but nothing happened. 

Could someone please help me? 

I can give the link of the video and the URL of the page I want to get linked on the video

Posted
On 5/18/2021 at 8:33 PM, Alessia_OL said:

Thank you for making this possible.

It almost work on my side but the video get sticked on the top left and I can't move it. I tried changing the "top" and "left" section but nothing happened. 

Could someone please help me? 

I can give the link of the video and the URL of the page I want to get linked on the video

Can you share page url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 6 months later...
Posted
On 5/18/2021 at 7:33 AM, Alessia_OL said:

Thank you for making this possible.

It almost work on my side but the video get sticked on the top left and I can't move it. I tried changing the "top" and "left" section but nothing happened. 

Could someone please help me? 

I can give the link of the video and the URL of the page I want to get linked on the video

Hello, I am not an expert and am not sure why it may be stuck left, right, or othewise.

I am just getting back to web building and if I find a way to fix this I will sure let you know.

Thank you!

  • 3 months later...
Posted

Heya,

I tried all the code options here, and none of these are working to be able to make the video block clickable.

The HTML code I am using to embed a looping video via video block is:

<iframe src="https://player.vimeo.com/video/683977585?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "450"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

I would like to be able to click this block and have it redirect me to another page. Anyone have any insight on this?

 

Posted
On 3/5/2022 at 7:41 AM, Fulleren said:

Heya,

I tried all the code options here, and none of these are working to be able to make the video block clickable.

The HTML code I am using to embed a looping video via video block is:

<iframe src="https://player.vimeo.com/video/683977585?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "450"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

I would like to be able to click this block and have it redirect me to another page. Anyone have any insight on this?

 

I solved 2 cases a few days ago. Can you share link to page where you added video block? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted

hey @tuanphan

How do I get the video on this page to be be a clickthrough button? 
https://www.simoneaves.com/testy

This is the code I have so far... not sure if I need a script? Maybe a different approach.

<div style="position: relative; width: 500px; height: 280px; overflow: hidden; border-radius: 10px;">
  <iframe id="clickable-video" src="https://player.vimeo.com/video/726095855?badge=0&amp;autoplay=1&amp;autopause=0&amp;loop=1&amp;player_id=0&amp;app_id=58479&background=1&muted=1" style="width: 100%; height: 100%;" frameborder="0" allow="autoplay; picture-in-picture" title="GHOST CAR - SEX - GRADED FINAL - 422HQ" allowfullscreen controls="0"></iframe>
</div>

<script>
  document.getElementById('clickable-video').addEventListener('click', function() {
    window.open('https://www.google.com/search', '_blank');
  });
</script>


Thanks!!!!

Posted
On 1/16/2024 at 12:39 AM, tootansimooon said:

hey @tuanphan

How do I get the video on this page to be be a clickthrough button? 
https://www.simoneaves.com/testy

This is the code I have so far... not sure if I need a script? Maybe a different approach.

<div style="position: relative; width: 500px; height: 280px; overflow: hidden; border-radius: 10px;">
  <iframe id="clickable-video" src="https://player.vimeo.com/video/726095855?badge=0&amp;autoplay=1&amp;autopause=0&amp;loop=1&amp;player_id=0&amp;app_id=58479&background=1&muted=1" style="width: 100%; height: 100%;" frameborder="0" allow="autoplay; picture-in-picture" title="GHOST CAR - SEX - GRADED FINAL - 422HQ" allowfullscreen controls="0"></iframe>
</div>

<script>
  document.getElementById('clickable-video').addEventListener('click', function() {
    window.open('https://www.google.com/search', '_blank');
  });
</script>


Thanks!!!!

Edit your code to this

<div id="clickable-div" style="position: relative; width: 500px; height: 280px; overflow: hidden; border-radius: 10px; cursor: pointer;">
  <iframe src="https://player.vimeo.com/video/726095855?badge=0&amp;autoplay=1&amp;autopause=0&amp;loop=1&amp;player_id=0&amp;app_id=58479&background=1&muted=1" style="width: 100%; height: 100%;" frameborder="0" allow="autoplay; picture-in-picture" title="GHOST CAR - SEX - GRADED FINAL - 422HQ" allowfullscreen controls="0"></iframe>
  <a href="https://google.com" class="video-click"></a>
</div>
<style>
.video-click {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.