Video background

Store Design
,

Topic summary

Adding a video background to a Shopify homepage. Main guidance: upload an MP4 (can be hosted on YouTube/Vimeo, but the file is uploaded via Settings > Files) and use its URL.

Implementation steps:

  • Go to Online Store > Themes > Actions > Edit code; add an embed in index.liquid using the uploaded video URL.
  • Add CSS in theme.scss.liquid / styles.scss.liquid / main.css to make it full-bleed:
    • .video-background positioned absolute, full width/height, z-index:-1.
    • video centered with transform, min-width/min-height 100%, object-fit: cover.
  • Save and preview.

Resources shared: multiple YouTube tutorials were linked for step-by-step walkthroughs.

Notes:

  • A code snippet to place in index.liquid is referenced; CSS rules are provided explicitly and are central to achieving the background effect.

Status: Proposed solution and tutorial links provided; no confirmation from the original poster yet, so resolution remains open.

Summarized with AI on December 20. AI used: gpt-5.
1

Hi everyone,

Can I add a video background to my Shopify homepage? If so, how?

Thank you all.

2

Hi @Hesepim ,

We can help you to add a video background to the Shopify home page. Please follow the steps below.

-Prepare the video in mp4 format. you can upload the video to YouTube or Vimeo.

-Upload it to Shopify under Settings > Files.

-Next edit the theme file :

Go to: Online Store > Themes. Click Actions > Edit code.

-Add the below code to index.liquid:

Replace the video_url with the video link that you have uploaded.

-Add the below css to theme.scss.liquid or styles.scss.liquid or main.css

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; 
}
.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; 
}

Save the changes and preview the site.

I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!

Regards,

Sweans

1 Like
3

@Hesepim , follow this tutorial https://www.youtube.com/watch?v=zsH6OkV8Dfs

1 Like
4

Hi @Hesepim , kindly check out the below given videos

And

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

2 Likes