Trying to add a button over a custom liquid loop video

[HomeLivingStore]

We've managed to find a code to get a looped video through the custom liquid section, however we can't figure out how to get a button over the top, we've tried a bunch of suggestions but no luck 😞
Ideally we want a solid button filled with a colour (probably a grey to match the header but we'd like to be able to adjust it), with white text. We are trying to make a "shop now" button that links to our product catalogue.


Our store can be found at:
URL: https://urban-style-home.myshopify.com/
Password is: whohff

Custom liquid section we used:
<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/s/files/1/0559/6921/8699/files/Urban_Style_Video_Take_1.mp4?v=1644995423"
type="video/mp4">
<source src="https://cdn.shopify.com/s/files/1/0559/6921/8699/files/Urban_Style_Video_Take_1.mp4?v=1644995423"
type="video/mp4">
</video>

[suyash1 · Accepted solution]

@HomeLivingStore - can you please try this code in your custom html section and check? replace dummy text with button code

<style>
video{max-width: 100%;}
.section-custom-video{position:relative;}

@media screen and (min-width: 750px){
.text_on_video{position: absolute;
    top: 40%;    right: 5%;    left: 60%;
  background-color: #fff;  padding: 10px;}
}
</style>

<div class="section-custom-video">
  <video autoplay="" muted="" loop="" playsinline="" class="custom-video">
    <source src="https://cdn.shopify.com/s/files/1/0559/6921/8699/files/Urban_Style_Video_Take_1.mp4?v=1644995423" type="video/mp4">
  </source></video>
   
   
    <div class="text_on_video">
      this is dummy text...........this is dummy text...........
      this is dummy text...........this is dummy text...........
      this is dummy text...........this is dummy text...........
    </div>
   
   
  </div>

[HomeLivingStore]

Hi Suyash1,

Thank you very much that worked well! 

I can adjust the positioning using the percentages.

Is there a way we can adjust the text and box colours ??

[suyash1]

@HomeLivingStore - text_on_video in above code is the class, set required css properties to it and it will change colors

[Cleanuf]

yo Suyashi i embeded that code on liquid form in my shopify store but i dont know how to get the play button over my video

[Cleanuf]

like ik you gave the code but then you said replace dummy text with pllay code. whats the play code?