Solved

Add button over custom Video in Dawn theme

Anviori
Tourist
6 0 0

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

Accepted Solution (1)

NomtechSolution
Astronaut
1245 113 149

This is an 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;
}

View solution in original post

Replies 6 (6)

Simonsron
Shopify Partner
699 87 122

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

banned

NomtechSolution
Astronaut
1245 113 149

This is an 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
Tourist
6 0 0

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
Tourist
6 0 0

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

jonesthelabel
Tourist
5 0 1

how do I change the font color to white??

JGulisane
Visitor
2 0 0

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?