Full width background video

Store Design

Topic summary

A user wants to add a full-width background video to their homepage (Dawn theme) positioned between the header and footer, with both elements made transparent. They also need to overlay an email subscription box centered on the video.

Solution provided:

Another user offered CSS code targeting the password page specifically, which:

  • Positions the main content section absolutely and centers it
  • Makes the header and footer backgrounds transparent
  • Adjusts video container height to 100vh-120vh
  • Sets z-index values for proper layering

Implementation steps:

  • Navigate to Online Store > Themes > Assets
  • Open section-password.css
  • Add the provided CSS code at the bottom
  • Save changes

Note: The solution appears focused on the password page rather than the main homepage as originally requested, which may require clarification or adaptation for the actual homepage implementation.

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

Hello,

Theme: Dawn

I would like to embed a full width video on my homepage only.

This video should be under the header and footer.

How can I make the header and footer transparent?

How do I embed a video with an email subscription box in the center?

  • Do I add the email section then change the section background to a video?—but how do I get it to overlap with the header and footer

https://vocaldealer.com

Thanks!

1 Like
2

Hi @marvine

Do you mean like this? In your password page?

Made4uoRibe_0-1726224390378.png
Made4uoRibe_0-1726224390378.png1564×797 105 KB

if it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the section-password.css

Then place the code below at the very bottom of the file.

section#shopify-section-template--18277607145688__main {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    z-index: 10;
}

.password-main .banner__box.gradient {
    padding: 0;
    background: transparent;
}

div#shopify-section-main-password-header .color-scheme-1.gradient {
    background: transparent;
}

div#shopify-section-template--18277607145688__background_video_qyQ4Nn .videoBox {
    max-height: 120vh;
    height: 100vh;
}

.password-main {
    margin-top: -70px;
}

div#shopify-section-main-password-header {
    z-index: 10;
}

div#shopify-section-main-password-footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}

.password__footer.color-scheme-1.gradient {
    background: transparent;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!