How can I create a video background with a transparent header using the Dawn template?

Store Design
,

Topic summary

A user wants to implement a video background with a transparent header on their Shopify store using the Dawn theme, similar to aimeleondre.com. They’re uncertain whether the issue involves making the video fullscreen or adjusting the header transparency.

Proposed Solution:

A community member provided step-by-step instructions:

  • Navigate to Online Store → Themes → Actions → Edit code
  • Locate Sections folder → index.liquid
  • Replace the image banner code with an iframe embedding the video
  • Add custom CSS to theme.scss.liquid to:
    • Position the header absolutely with z-index layering
    • Make the video container fullscreen (100% width/height)
    • Set proper overflow and positioning properties

The solution involves creating a fullscreen video section with absolute positioning for the header overlay, ensuring the header appears transparent over the video background. The discussion remains open pending confirmation whether this resolves the user’s issue.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

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

2

Hello @adjokoto ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections folder → index.liquid
  • Replace the code that generates the image banner with the following code:

  

    
  

  
    <iframe class="hero-video" src="[INSERT YOUR VIDEO URL HERE]" frameborder="0" allowfullscreen=""></iframe>
  • Add the following CSS code to the end of the “theme.scss.liquid” file:
.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%;
}
  • Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.