Video background

Store Design
,
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