Video background

[Hesepim]

Hi everyone,

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

Thank you all.

[Sweans · Accepted solution]

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:

<div class="video-background"> 
<video autoplay muted loop> 
<source src="video_url" type="video/mp4"> Your browser does not support the video tag. </video> 
</div>

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

[BSSCommerce-B2B · Accepted solution]

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

[Sweans · Accepted solution]

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:

<div class="video-background"> 
<video autoplay muted loop> 
<source src="video_url" type="video/mp4"> Your browser does not support the video tag. </video> 
</div>

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

[BSSCommerce-B2B · Accepted solution]

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

[topnewyork · Accepted solution]

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!