How can I add a "SHOP NOW" button and header text to my liquid video? (Dawn Theme)

[CATAY]

I would like to add two pieces the the middle area of my liquid video on my homepage:

- Header Text

- SHOP NOW button

The example photo I've added below is of a Video Background with the same look I'm going for in the liquid video.

So far, this is the code we have in the liquid, for the video itself:

<style>

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;
}

</style>

<video autoplay loop
playsinline muted>

<source src="https://cdn.shopify.com/videos/c/o/v/videoexample.mp4"></video>

Example of what we want:

[made4Uo]

Hi @CATAY 

You need a section to be written. I would suggest to hire someone to do this for you

[gr_trading]

Hi @CATAY ,

update your code with the below one.

<style>
video {display: block; margin: 0 auto; width: 100%; height: 50%;}
.video_wrapper{position:relative;}
.video_overlay{position:absolute; top:0; right:0; left:0; bottom:0; padding:10px;}
</style>
<div class="video_wrapper">
	<video autoplay loop playsinline muted><source src="https://cdn.shopify.com/videos/c/o/v/videoexample.mp4"></video>
	<div class="video_overlay">
		<h1>Video heading</h1>
		<h5>Video subheading</h5>
		<a href="#">Link</a>
	</div>
</div>

Hope it will help...

[CATAY]

Thanks! I will try this now 😊

[CATAY]

I've managed to create code that works. I'm pretty new to this so it's been tricky.

There are only minor issues now.

1. The video header title will overlap the "shop now" button on mobile, when the screen size is smaller. 

2. I cannot seem to adjust the section height, to make the video smaller on desktop view.

I tried adjusting code to make the header text smaller based on a maximum screen size, as well as adjusting the padding bottom to make the video height smaller. It did not seem to do anything though. 

Liquid section code found here:

<style>
.custom-video-section {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 20%; /* Adjust the padding-bottom value to make the section shorter */
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-now-button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
  display: inline-block;
  padding: 12px 24px;
  background-color: #DF3F0E;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border-radius: 20px;
  z-index: 1;
}

.video-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-size: 24px;
  z-index: 1;
}

@media (max-width: 768px) {
  .video-heading {
    font-size: 8px;
    top: 45%; /* Adjust the value to align the header text */
  }
}
</style>

<div class="custom-video-section">
  <div class="video-container">
    <video autoplay loop playsinline muted>
      <source src="https://cdn.shopify.com/videos/c/o/v/ee75b90e5e634fba9a0664dc8aeff6d1.mp4">
    </video>
    <h2 class="video-heading">A curated collection that reflects the warmth of our Brazilian roots.</h2>
    <a href="https://catay.us/collections/impar-atelier" class="shop-now-button">SHOP NOW</a>
  </div>
</div>

[gr_trading]

It's because if you have position absolute in video-heading class

[CATAY]

Thanks for letting me know this is one of the issues.

1. What should I change video heading class position to instead of absolute?

2. Any ideas to make the video size smaller (shorter in height but still full width if possible) on desktop?

[gr_trading]

For 1 point just remove the position attribute u don't need that attribute.

For point 2

You have video tag class put your desired height in it.

However your video has to in proportion of that height or width or video block will show black spot arround the video if your video is not in proportion.

Hope it will solve your issue.

[VanessaLL1]

Is there a way to use this code but have the ‘buy now’ link NOT blue and as a button with a square around it?

[Zqdo]

Hey @CATAY , saw you were able to get some help. Were you able to figure out the issue?

[CATAY]

Hi @Zqdo! Thanks for asking. 

Still having some issues figuring out how to implement a solution for:

1. shop now button / video header title overlap on small screens (especially mobile)

2. making the video frame size smaller (shorter in height but still full width if possible) on desktop

Any insight is appreciated!