Full width background video

Store Design
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!

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!