Shopify themes, liquid, logos, and UX
Hi,
I have created a video background using this code I found online :
<div class="hero">
<div>
<h1>{{ section.settings.heading }}</h1>
<a class='button' href='{{ section.settings.link_url }}'>{{ section.settings.link_text }}</a>
</div>
<video class="video-bg" autoplay muted loop playsinline poster={{ section.settings.poster }}>
<source src={{ section.settings.video_url }} type='video/mp4'>
</video>
</div>
{% schema %}
{
"name": "Video Background Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Overlay text"
},
{
"type": "url",
"id": "video_url",
"label": "Enter the video url here"
},
{
"type": "image_picker",
"id": "poster",
"label": "Add fallback background image in case video doesn't load"
},
{
"type": "text",
"id": "link_text",
"label": "Enter CTA button text (if required)"
},
{
"type": "url",
"id": "link_url",
"label": "CTA button link page"
},
{
"type": "range",
"id": "blur",
"min": 0,
"max": 10,
"step": 0.1,
"unit": "px",
"label": "For low quality video add blur",
"default": 0
},
{
"type": "range",
"id": "opacity",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Change video opacity",
"default": 1
}
],
"presets": [
{
"name": "Video Background Banner"
}
]
}
{% endschema %}
<style>
.video-bg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
filter: blur({{section.settings.blur}}px) opacity({{section.settings.opacity}});
}
.hero {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
margin-bottom: 50px;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.hero div {
padding: 1.5em;
background: hsl(0 100% 100% / 25%);
backdrop-filter: blur(10px);
}
</style>
The video works and all looks fine but the text overlay is central to the video and doesn't look how I want. How would I go about changing the text overlay position to top left corner with a white box/background for the text, please?
Thanks.
Solved! Go to the solution
This is an accepted solution.
.hero {
display: flex;
justify-content: flex-start !important;
align-items: flex-start !important;
}
.hero > div {
width: 43rem;
padding: 20px 1%;
height: 50%;
background-color: white;
margin-top: 2%;
margin-left: 2%;
}
Hy, @ed_bb
please send page URL
i can't find the video section please send me page URL in which there you add the video
Like this.
you want this container on top left
Hi @websensepro
Yes, correct.
However would ideally prefer it to be a white background box or just text and button with no background box for the text.
Thanks.
do to want this one styling
Almost, would want it top left floating so not touching the top of side if that makes sense?
Also, is there anyway to make the text run over 2 lines instead of the box being wider?
Thanks.
its fine now
In from the left slightly, box more square than rectangle, please.
Thanks.
Yes! 🙂
Looks good, thank you. Could you advise on code?
This is an accepted solution.
.hero {
display: flex;
justify-content: flex-start !important;
align-items: flex-start !important;
}
.hero > div {
width: 43rem;
padding: 20px 1%;
height: 50%;
background-color: white;
margin-top: 2%;
margin-left: 2%;
}
Thank you very much indeed 🙂
Enjoy the rest of your day!
Sorry, one more question....
How do I make it so the white box is contained within the limits of the page/screen on mobile?
See screenshot - the right side hangs over the edge of the screen but want it to look like the left side does, please.
Thanks.
Don't worry - I've sorted. Thanks.
Do you happen to know how to add a video background to your actual header section in dawn theme?
@beyondstore Apologies, I do not. I know the Motion theme has it as standard as do some others but not code I have I'm afriad. I wish I did!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024