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 %}
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!
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 %}
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!
Hello,
That worked! How do i remove the white bar at bottom on mobile?
Thank you again!
