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

Store Design

Topic summary

Method shared to add an MP4 (not YouTube) video background to Shopify Debut using a YouTube tutorial and a downloadable Liquid snippet (rename to video_background.liquid.text and paste as shown).

Adoption and feedback: Multiple users report success. Questions arise on keeping the video 100% width/height without cropping and improving mobile behavior; OP suggests contacting the tutorial author.

Reported issues: missing audio; black bar/edge and excess blank space under the video on mobile; empty space beneath the banner on desktop.

Updates and fixes:

  • An updated tutorial is linked that works for all Shopify themes; users confirm it also works on Dawn.
  • CSS tweaks suggested by commenters:
    • Adjust @media query breakpoint (e.g., max-width 400–450px) for mobile.
    • Remove/comment out height in .videoBackground to eliminate blank space.
    • In the pasted code, edit @media settings; one user changed overflow from hidden to absolute to fix mobile layout.

Status: Solution broadly works with theme-agnostic updates and CSS tweaks. Open items include full-bleed without cropping, enabling audio, and pinpointing the exact code to remove mobile black space with a button. One image was attached but not central.

Summarized with AI on January 12. AI used: gpt-5.
9

Hi there,

After uploading code and video, Video is working fine but Website shows a lot of empty space under the video and can’t even delete it or reduce it. Can you please guide?

Please find attached photo for proof,

Thanks

Himanshu