fullscreen background video that acts as the global site background across all pages

Store Design
, , ,
1

I’m building a highly customized Shopify store using the Dawn theme as the base. I’ve made several layout and design modifications to fit my brand’s aesthetic.

What I want to achieve:

I want to implement a fullscreen background video that acts as the global site background across all pages.

Here’s exactly what I need:

Functional Requirements:- A background video (MP4 format) that:

  • Plays automatically when the page loads

  • Is muted by default to support autoplay

  • Loops continuously

  • Is non-clickable (doesn’t interfere with navigation)

  • Covers the entire screen (object-fit: cover)

  • Remains fixed (positioned behind content at all times)

  • Does not scroll — the content scrolls over it

  • Loads as soon as the site loads

Device Compatibility:- Works on desktop, mobile, and tablets

  • Should scale responsively without cutting off major portions

  • No layout breakage or white bars on any side

Customization Requirements:- The video file should be:

  • Easily replaceable via Shopify theme settings or file upload

  • Adjustable in height/position if needed later

  • Background video should not interfere with:

    • Header navigation (including mobile drawer menus)

    • Hero sections

    • Product image sliders or overlays

    • Page builder content (if added later)

Current Video URL I’m Using:

https://cdn.shopify.com/videos/c/o/v/26367d76b67b4a2188991269cafc2f89.mp4

Please help me implement this in the cleanest and most reliable way, ideally one that doesn’t conflict with Dawn’s layout structure and allows me to control/update the video easily in the future.

Thanks so much!

my store link: https://xqehfi-zu.myshopify.com/

2

@logiclayer use Canvify app.

I know this sounds a bit of work on your part but very easy…trust me. Create a new website design in Canva…Put your video in Canva and set it as background. Now add your hero banner text, heading or whatever. Then you just import it into Shopify using Canvify app and that video and text will become a section of your store.

And now lets talk about the way you want to do it.

Edit the theme.liquid file

Navigate to:
Online Store > Themes > Edit Code > Layout > theme.liquid

Paste the following HTML just below the opening tag:

If you uploaded the video via Settings > Files, use the full CDN URL instead:

3. Add CSS for Full-Page Background

Go to Assets > base.css (or any global CSS file) and paste this at the bottom:

#background-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: -1;
}

#background-video {
  min-width: 100vw;
  min-height: 100vh;
  object-fit: cover;
}

This ensures the video fills the screen and sits behind all other content.

3

THANKS A LOT BRO, SERIOUSLY THIS THING IS FRUSTRATING ME FROM LAST 2 DAYS AND EVERYTIME SOME KIND OF ERROR IS OCCURING. THX FOR THE HELP NOW ITS DONE