How to add a video background to the homepage of Shopify Debut theme

Store Design
13

I saw a few comments under the video and saw this solution:

  • “I actually was able to solve the issue. I had to change @media screen and (max-width: to 400px) vs original suggestion and it worked for me”

  • To fix the dead space under the banner, just comment out the video-background height in the CSS >>>> .videoBackground { /* height: 100%; */ position: relative; }

  • Solution for BLACK EDGE ON MOBILE : in the code that you pasted for your video-background, search for @media and change the max-width to 450px (this is the dimension of your screen when in mobile view) i then searched (ctrl+F) for ‘overflow’ and changed that from HIDDEN to ABSOLUTE… my webpage is now functioning properly on mobile and desktop view. hope this helps

  • Solution for BLACK SPACE: The remove the blank space beneath the video, change the style of .videoBackground { height: 100%; position: relative; } to: .videoBackground { position: relative; }