Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
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;
}
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
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;
}
This is great, thank you. How would I be able to make the button look similar to the button label for the image banner?
Changing the class from class="btn" to class="button" did it for me
how do I change the font color to white??
I have a few follow-up questions:
User | RANK |
---|---|
36 | |
25 | |
14 | |
13 | |
9 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023