Shopify themes, liquid, logos, and UX
I am trying to add a shop now button over my custom video. here is the liquid code I am using. I have to have separate video for mobile (had to replace my video link words "video link" in order to ask my question here
<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
</style>
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
<source src="video link" type="video/mp4">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
<source src=" video link" type="video/mp4">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
Hi Nurzia12!
I think I can help you out. I think you're missing some wrappers and then you can put videos/buttons and more inside. I'll show you what I mean by wrappers then give you a snippet that should work for you.
The first thing I would do is use divs to create the actual areas for the video and then populate those divs with the video content. This will give you much more control.
In this snippet I've created 2 overlapping divs. The first being where we'll want the video and the second being the overlapping div that we'll hold the button element in. The colors are two tone. If you want to see it working here it is in jsfiddle.
<style>
.video-wrapper {
background-color: #EBEBEB;
width: 100%;
height: 200px;
object-fit: cover;
position: absolute;
margin: 0 auto;
}
.video-button-wrapper{
background-color: #FBD603;
width:100%;
height:100px;
position: absolute;
bottom: 0px;
}
.video-button{
right:0px;
position:absolute;
}
</style>
<div class="video-wrapper">
<div class="video-button-wrapper">
<button class="video-button">here's the button</button>
</div>
</div>
So with that now we have wrappers we can insert elements into and their formatting will automatically be handled. So let's put your video inside the wrappers and change up the styling to give you some variables to play with so you can get the look and feel you need. I've put in background colors here just so you can see the wrappers as you're adding elements, playing with sizing etc.
<style>
video {
width: 100%;
height: auto;
display: none;
margin: 0 auto;
}
video.mobile-video {
display: none;
}
@media (max-width: 767px) {
video.mobile-video { display: block !important; }
video.desktop-video { display: none !important; }
}
.video-wrapper {
background-color: #EBEBEB;
width: 100%;
height: auto;
object-fit: cover;
position: absolute;
margin: 0 auto;
}
.video-button-wrapper{
background-color: rgba(255, 0, 0, 0.4);
width:100%;
height:100px;
position: absolute;
bottom: 0px;
}
.video-button{
right:10%;
position:absolute;
}
</style>
<div class="video-wrapper">
<video class="desktop-video" muted="" autoplay="" playsinline="" loop="">
<source src="movie.mp4" type="video/mp4">
</video>
<video class="mobile-video" muted="" autoplay="" playsinline="" loop="">
<source src=" movie.mp4" type="video/mp4">
</video>
<div class="video-button-wrapper">
<button class="video-button">here's the button</button>
</div>
</div>
Hope this helps!
Cheers,
Mike
Hey, how can i implement this into my own store?
Hey Skitzstreet,
I'd need to know the code you're working with and the functionality you'd like to achieve. Alternatively we could take a look at your store, provide a quote and make the changes for you!
Cheers,
Mike
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025