Add button over custom Video in Dawn theme

Technical Q&A
3

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'
-%}

    
    

        ## Your Text Here
        

Your additional description or message goes here

        Button

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;
}
1 Like