Video Banner landing page full screen on mobile?

Shopify Apps

Topic summary

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:

  • Height: 100vh (full viewport height)
  • Object-fit: cover

Current Status:
The CSS fix successfully resolved the mobile display issue. The original poster is now asking if there’s a way to:

  • Remove the remaining white space at the bottom on desktop
  • Make the video automatically adjust to full screen on desktop as well

The discussion remains open with the desktop optimization question unanswered.

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

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;
}