Adding a Shop Now Button and Text Over my Autoplay Looped Video

Solved

Adding a Shop Now Button and Text Over my Autoplay Looped Video

RoguePup
Tourist
4 0 1

Hi, 

I am not very familiar with html coding but found some liquid code that I used to make a video on my homepage. The video autoplays on a loop. I would like to have a Shop Now button along with some text placed in the center of the video. I would appreciate any help! Thank you! My site page is https://roguepup.com/

 

This was the code I used to create my Custom Liquid video: 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>

Accepted Solutions (2)

attaboiaj
Shopify Partner
22 4 4

This is an accepted solution.

Here this will works for you 

```

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
position: relative;
}

.button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.shop-now-button {
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.shop-now-button:hover {
background-color: #45a049;
}
</style>

<div style="position: relative;">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>
<div class="button-container">
<button class="shop-now-button">Shop Now</button>
</div>
</div>

```

View solution in original post

attaboiaj
Shopify Partner
22 4 4

This is an accepted solution.

Yes it's possible 

Copy paste the my code on ChatGPT and ask
Please add this "link" to the shop now button
Please add some "basic text" under shop now button


View solution in original post

Replies 5 (5)

RoguePup
Tourist
4 0 1

Forgive the simple image but here is what I would like.Screenshot 2024-06-29 231821.png

attaboiaj
Shopify Partner
22 4 4

This is an accepted solution.

Here this will works for you 

```

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
position: relative;
}

.button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.shop-now-button {
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.shop-now-button:hover {
background-color: #45a049;
}
</style>

<div style="position: relative;">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>
<div class="button-container">
<button class="shop-now-button">Shop Now</button>
</div>
</div>

```

RoguePup
Tourist
4 0 1

Hi, 

Thank you for your time. The button worked but I am wondering where in the code I would put the link for the button? Also, if possible is there way to add some basic text under the shop now button? 

 

attaboiaj
Shopify Partner
22 4 4

This is an accepted solution.

Yes it's possible 

Copy paste the my code on ChatGPT and ask
Please add this "link" to the shop now button
Please add some "basic text" under shop now button


RoguePup
Tourist
4 0 1

Thank you!