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

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

adjokoto
Visitor
3 0 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

Reply 1 (1)

AliReviews
Shopify Partner
773 90 358

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:
<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>
  • 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.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!