Add Button Over Custom Video to go to all products page

[lukasbimba]

Here is my index.liquid file that holds my custom video that loops on the main home page. I am trying to add a button that is overlayed on the video that can be clicked to view all products. 

<section class="video-slider-area">
  <div class="video-slider">
    <video src="https://cdn.shopify.com/s/files/1/0043/3710/7055/files/TrimSewElevatedVideo1.mp4?v=1651629995" autoplay muted loop playsinline></video>
  <div class="video-text">
         <div class="navigation-right" style="float:right">
       <a href="{{ collections[all].url }}">SHOP ALL</a>
        </div>
          {% if section.settings.show_view_all_button %}
     <div class="text_center">
          <a href="collections/all" class="btn">View All Products</a>
    </div>
    {% endif %}
     </div>
  </div>
</section>
{{ content_for_index }}

 Here is my code from the theme.scss.liquid file that adds the custom video.

video {
  width: 100% !important;
  height: auto !important;
}
 .video-text {
    object-fit: overlay;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
 .video-slider-area {
height: 1325px;
width: 100%;
position: relative;
overflow: hidden;
}
 video {
object-fit: cover;
position: center;
height: 100px;
width: 100%;
top: 0;
left: 0;
}
 .video-slider-area:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .2);
z-index: 1;
}
.video-slider-area video {
    height: 1000px!important;
}
 h1 {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-size: 32px;
font-weight: 700;
}
 @media (max-width: 400px) {
h1 {
font-size: 18px;
}
}
 @media (min-width: 1200px) {
h1 {
font-size: 32px;
}
}
 .video-text {
font-weight: 400;
font-size: 50px;
    position: absolute;
     top: 85%;
     left: 50%;
    right: 50%;
    bottom: 50%;
     transform: translate(-50%, -50%);
}

[collinsmbaka · Accepted solution]

Hi @lukasbimba 

You can add the button with this code

<section class="video-slider-area">
  <div class="video-slider">
    <video src="https://cdn.shopify.com/s/files/1/0043/3710/7055/files/TrimSewElevatedVideo1.mp4?v=1651629995" autoplay muted loop playsinline></video>
  <div class="video-text">
         <div class="navigation-right" style="float:right">
       <a href="{{ collections[all].url }}">SHOP ALL</a>
        </div>
          {% if section.settings.show_view_all_button %}
     <div class="text_center">
          <a href="collections/all" class="btn">View All Products</a>
    </div>
    {% endif %}
     </div>
<a class="button-wrapper" href="all-product-link"><button class="button-style">Click Me</button></a>
  </div>
</section>
{{ content_for_index }}

Add this CSS to the theme.scss.liquid
Please adjust the top and right based on where you want it set on the video

a.button-wrapper{
position: absolute;
top:50px;
right:50px;
z-index: 999;
}

[lukasbimba]

@collinsmbaka 

How would I go about getting the link to my products page? 

[collinsmbaka]

@lukasbimba 

Do you mean URL to list all your products?
your-shopify-store.myshopify.com/collections/all

[jodylewis8]

I have the same question as @lukasbimba. I assume this code will work, but I'm unsure where exactly to add the button. 

I added my video using the following custom liquid code: 
<style>
video {
width: 99%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/d95b4bfc95bf41559e1d8c5a54c81d23.mp4"
type="video/mp4">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>

How do I add the button on top of this video?

Thanks

[graceggood]

This is so so helpful, but how can I move the text to be higher and the video became darker, how can I reset it to the original coloring? Also how can I edit the font color? Also, the video is still not full width.

Here is my site for reference: https://b8339b-a9.myshopify.com/