Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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!

Link to comment

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>

 

Link to comment

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
Link to comment

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>

 

Link to comment

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. 

Link to comment

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!

 

Link to comment

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
Link to comment

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.

 

 

Link to comment

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>


 

Link to comment

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>


 

Link to comment

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>


 

Link to comment
  • 1 month later...
  • 2 months later...

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?

Link to comment
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
Link to comment
  • 2 months later...
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 🙏 

 

Link to comment
  • 3 weeks later...
  • 2 months later...

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

Link to comment
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...