Add enter button on top of background video

[scotticus]

Hello,

How can i add a clickable link to a page as an 'ENTER' button on top of a background video in Dawn 7.0.1?

website:

kilvay.com

Any help is appreciated,

Thank you,

Scott

[Uhrick]

hey, Soctticus, good evening. Do you want it over this gif that you have?

[scotticus]

Hey,

Thank you for the reply. Yes i would like it at the bottom centre of the page on top of background video.

Thanks 

[scotticus]

Also if it could be Helvetica font in white. 

Thank you again

[Uhrick]

but is this video section in the homepage dawn's native video section? Or is it custom?

[scotticus]

it is custom liquid 

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 %}

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

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

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

[Uhrick]

do you want a button with a link that is hardcoded over the video? Meaning you will only be able to change the link if messing with code?

[scotticus]

that would be okay. i would like it to link to this page https://kilvay.com/collections/frontpage

thank you 🙂

[Uhrick]

But right now all of the video is a link. Do you want to keep it this way and the button will be just a visual aid? Or do you want to only have the link on the button?

[scotticus]

Hey,

i would like the button to be a visual aid which is also clickable, if this is possible?

Thank you 

[Uhrick]

I mean, it is possible, but wouldn't it be kinda redundant? As the button will be enveloped by the video? And all of the video will be a link to the same place as the button?

[Artzen_tech]

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

As you were expecting a button at the bottom of the background video. Here, in the below screenshot i have attached the achieved result which you can implement and achieve easily.

For the result shown in above screenshot you have to edit your video section and a few line code. This code and the css will give you the desired result.

This above written code is to be added above the video src code in this particular section.
And in this above screenshot only there is the css that is to be implemented on the button to make it position like this and style it like you desire.

Here, is the code of the same.

<a href="https://kilvay.com/collections/frontpage"><button>Click me</button></a>
<style>
      position: absolute;
      z-index: 2;
      width: fit-content;
      margin: 0 auto;
      padding: 10px 20px;
      background: black;
      color: white;
      right: 47%;
      bottom: 0%;
</style>

This code will help you and solve your problem.

Let me know if need further assistance
Regards,
Artzen Technologies