Clickable Shop Now Button on custom liquid video

nurzia12
Visitor
1 0 1

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>

Reply 1 (1)

SymmetryMike
Shopify Partner
30 6 3

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

Mike Kiss

@ symmetrycommerce.com we build integrations, websites and Shopify solutions.