How can I make my background video a clickable link using Dawn 7.0.1?

[scotticus]

Hello, 

I would like to make my background video a clickable link to my store page using Dawn 7.0.1. Any help is appreciated.

My shopify website: kilvay.com

Thank you

[Artzen_tech]

Hi @scotticus 
Its Artzen Technologies! We will be happy to help you today. 

You can make the background video clickable by adding an anchor <a> tag to the video. You can add the tag in this section of your store. Go to this section and find class <video class="small--hide"> and add anchor tag to this (<a href=" "></a> ) and give the link inside href="" of the page to which you want to render it.

And if you need any other help then you can contact us.

Let me know if need further assistance
Regards,
Artzen Technologies

[scotticus]

Hello, 

I tried but the video would stop playing and not allow link. can you show me the code in case i make mistake. Here is the code:

<style>

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;

}
@media (max-width: 749px) {
.small--hide {display: none !important;}
}
@media (min-width: 750px) {
.medium-up--hide {display: none !important;}
}

video.small--hide{
height: 100vh !important;
object-fit: cover !important;
position: fixed !important;

}
</style>

{% comment %} Desktop Show {% endcomment %}

<video class="small--hide"
autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/9d46d61d9cfc486ebdfe961b4e67cc0a.mp4">
</video>

{% comment %} Mobile Show {% endcomment %}

<video class="medium-up--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/8491ebfd691f40e6b2b211440b6974cc.mp4">
</video>

Thank you very much

[Artzen_tech · Accepted solution]

Hi @scotticus 
Its Artzen Technologies! We will be happy to help you today. 

In the above code you shared, you haven't added the <a> tag. If you will not add the tag then it will not be clickable. Use this code, this will help you and it will definitely work.

<a href=""><video class="small--hide" autoplay="" loop="" playsinline="" muted="">
<source src="https://cdn.shopify.com/videos/c/o/v/9d46d61d9cfc486ebdfe961b4e67cc0a.mp4">
</video></a>

In this href enter the url of target page.

Let me know if need further assistance
Regards,
Artzen Technologies

[scotticus]

Hey,

It is now working perfect! thank you for your help 🙂

[Artzen_tech]

Hi @scotticus 

Glad that it worked and helped you. Please contact for any further query.

Let me know if need further assistance
Regards,
Artzen Technologies