A user is experiencing display issues with a video banner on their landing page. On desktop, there’s a small white space at the bottom. On mobile, the video only fills the top portion of the screen, leaving the rest white.
Solution Provided:
Another user shared custom CSS code targeting mobile devices (max-width: 767px) that sets the video background to:
Current Status:
The CSS fix successfully resolved the mobile display issue. The original poster is now asking if there’s a way to:
The discussion remains open with the desktop optimization question unanswered.
Trying to get my Video Banner on my landing page to fit fullscreen on desktop and mobile. It looks close on desktop, with a small white space along the bottom, but on mobile it only fills the top of the screen, and the rest of the page is white. My “enter” button is in the middle of the screen which is ok.
link to my site
Try to add this code to custom CSS
@media screen and (max-width: 767px) {
.media.video-background>*:not(.zoom){
height:100vh!important;
object-fit:cover!important;
}
Amazing! Thank you. Is there a way to also get rid of the blank white space at the bottom on the desktop version? To automatically adjust to be full screen there as well?