Add button over custom Video in Dawn theme

[Anviori]

Hello, I have this custom liquid to loop an MP4 in the background of the free dawn theme:

{%- liquid
    assign video_handle = 'video url'
    assign video_format = 'mp4'
-%}

<video title="title" autoplay loop muted playsinline style="inline-size: 100%;">
    <source src="{{video_handle}}"
        type="video/{{video_format}}">
</video>

How can I make it so that I can add text and button similar to what the 'Image Banner' section has? Also how can I change the size (height specifically) of the video.

Thank you

[Simonsron]

this is html

<div class="video_box">
<video title="title" autoplay loop muted playsinline style="inline-size: 100%;">
    <source src="{{video_handle}}"
        type="video/{{video_format}}">
</video>
<div class="video_content">
<a class="btn" href="your href here....">text</a>
<div class="video_text">text</div>
</div>
</div>

this is css

.video_box{
position:relative;
}
.video_content{
position:absolute;
bottom:10%;
left:50%;
transform:translateX(-50%);
}

You can try this

[NomtechSolution · Accepted solution]

To add text and a button on top of the video loop in your Dawn theme, you can modify your liquid code as follows:

{%- liquid
    assign video_handle = 'video url'
    assign video_format = 'mp4'
-%}

<div class="video-banner">
    <video title="title" autoplay loop muted playsinline>
        <source src="{{ video_handle }}" type="video/{{ video_format }}">
    </video>
    <div class="video-content">
        <h2>Your Text Here</h2>
        <p>Your additional description or message goes here</p>
        <a href="#" class="btn">Button</a>
    </div>
</div>

In the code above, a <div> element with the class "video-banner" wraps the video and the content. The video element contains the source of the video file, while the <div> with the class "video-content" holds the text and button elements.

To style the video and adjust its size, you can use CSS. Here's an example of how you can change the height of the video:

.video-banner {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust the height to your desired value */
}

.video-banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

[Anviori]

This is great, thank you. How would I be able to make the button look similar to the button label for the image banner?

[Anviori]

Changing the class from class="btn" to class="button" did it for me

[jonesthelabel]

how do I change the font color to white??

[JGulisane]

I have a few follow-up questions:

1. How do I change the header font to white?
2. How do I change the color of the button?
3. Is there a way to add an overlay to the video?

[christiebianco]

Hi resurfacing this solution, button code worked great, I see the button and am able to tweak the code for placement! I'm having an issue where my button hyperlink isn't working on desktop but it's working on mobile? is this a known issue?

[christiebianco]

This is my shopify site: https://ilwil-period.com/