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

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!

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>

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>

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.

It's the first line of pixels!

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>

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. 

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!

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.

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.

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>

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>

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>

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

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?

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.

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 🙏 

Was able to get video to be a click through on my landing page but video isn't playing any audio. Anyway to get that to work as well?

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

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

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!

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?

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.

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!!!!

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>