Password page email form with background video Dawn 7.0.1

[scotticus]

Hello,

I would like to be able to use my background video as the background with the email sign up on top. How do i do this?

https://kilvay.com/

Current code for mobile and desktop background video:

video { display: block; margin: 0 auto; width: 100%; height: 50%; } @media (max-width: 749px) { .small--hide {display: none !important;} } @media (min-width: 750px) { .medium-up--hide {display: none !important;} } video.small--hide{ height: 100vh !important; object-fit: cover !important; position: fixed !important; }

{% comment %} Desktop Show {% endcomment %}

{% comment %} Mobile Show {% endcomment %}

[BSS-Commerce]

Hi @scotticus ,

@media (max-width: 749px) {
.small--hide {display: none !important;}
#Banner-template--17087053857079__main {
position: fixed
z-index: 100;
top: 50%
transform: translateY(-50%);
left: 20px;
right: 20px;
}
}

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;
top: 0;

}

Please edit the css code for your video and breakpoint as above.

Hope it is useful to you!

[scotticus]

Hey @BSS-Commerce ,

Thank you for the help.

I used your code but it has only worked for the desktop video. How do i allow the same to happen with the mobile video?

Also how would i make the email centre of page?

Thank you so much!

CURRENT CODE:

video { display: block; margin: 0 auto; width: 100%; height: 50%; top: 0; } @media (max-width: 749px) { .small--hide {display: none !important;} #Banner-template--17087053857079__main { position: fixed z-index: 100; top: 50% transform: translateY(-50%); left: 20px; right: 20px; } } @media (min-width: 750px) { .medium-up--hide {display: none !important;} video.small--hide{ height: 100vh !important; object-fit: cover !important; position: fixed !important; }

{% comment %} Desktop Show {% endcomment %}

{% comment %} Mobile Show {% endcomment %}

[BSS-Commerce]

Hi @scotticus ,

Add a semicolon “;” after the code snippets top: 50%; and position: fixed;

@media (max-width: 749px) {
.small--hide {display: none !important;}
#Banner-template--17087053857079__main {
position: fixed;
z-index: 100;
top: 50%;
transform: translateY(-50%);
left: 20px;
right: 20px;
}
}

If you have already added the semicolon “;” and it is still not working, you can consider adding the !important property.

@media (max-width: 749px) {
.small--hide {display: none !important;}
#Banner-template--17087053857079__main {
position: fixed !important;
z-index: 100 !important;
top: 50% !important;
transform: translateY(-50%) !important;
left: 20px !important;
right: 20px !important;
}
}

Good luck!

[scotticus]

Hello,

That worked! How do i remove the white bar at bottom on mobile?

Thank you again!