Added a Shopify hosted video on home page.

[nitinj]

I have added a video on Home page in Shopify Dawn theme.I want to have a button "Buy Now " on video. I have added button but it is not visible on video.

This is the code:

I have added a video section on home page.I have added a Buy Now button.  Button is not visible on video. I am not able to get what is the error is there. Can anyone help.

{%- unless section.settings.heading == blank -%}
<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</
<div class="video-content">
<button class="btn">Click me</button>
</div>
</div>

</div>
{%- endunless -%}
</div>
<noscript>

Added CSS

.video-banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}

[deepaksharma]

Hi there @nitinj 

You were missing a closed h2 tag, 

No style tag
I have added a class on the button to make sure it inherit store settings

{%- unless section.settings.heading == blank -%}
<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
<div class="video-content">
<button class="btn button">Click me</button>
</div>
</div>

</div>
{%- endunless -%}
</div>
<style>
.video-banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}
</style>

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

[nitinj · Accepted solution]

Hi Deepak,

Thank you for the reply.I have added above code but still button is not visible on video. 

<div class=video_banner>
<div class="title-wrapper title-wrapper--no-top-margin{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
<div class="video-content">
<button class="btn button">Click me</button>
</div>
</div>

CSS .video_banner {
position: relative;
width: 100%;
height: 500px; /* Adjust the height to your desired value */
}
.video-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}

[deepaksharma]

can you add the code to your website and share me the preview link

[nitinj]

I want button only in last video on home page.

https://jetpodvaccum.myshopify.com/

Store password neonah

[deepaksharma]

Sorry but the code you provided here and the code on your website for the video is different

I am not seeing the class video-content have you used this code in your website?

[nitinj]

But there is video section in sections and other are two css Files. I have made changes here.