Shopify themes, liquid, logos, and UX
Hello I'm trying to have a video background with a transparent header but i am having difficulty making that happen. The goal is it to look similar to aimeleondore.com. Can you please help? I have tried to use some of the code from other posts but none seem to work. I'm not sure if I need to somehow get the video to be full screen or if the header is the issue. If I need to make the video somehow full screen, how can i do that?
I am using the dawn template.
https://aldremode.myshopify.com/
pw: djokoto
Hello @adjokoto ,
You can try to follow these steps:
<div class="hero-video-section">
<div class="header-wrapper">
<header class="site-header header--transparent" role="banner">
<!-- Your transparent header code here -->
</header>
</div>
<div class="video-container">
<iframe class="hero-video" src="[INSERT YOUR VIDEO URL HERE]" frameborder="0" allowfullscreen></iframe>
</div>
</div>
.hero-video-section {
position: relative;
height: 100vh;
overflow: hidden;
}
.header-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
.site-header {
position: relative;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-video {
width: 100%;
height: 100%;
}
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025