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

Store Design
1

Dear Community,

I searched and searched for the solution within the community to find an answer to this “simple” problem. This message is to provide the solution to you if you are looking for the same thing - You want to add a mp4 video not a YouTube video to the home page of your theme.

Here is the solution: https://www.youtube.com/watch?v=FcB580SjU_Q

Here is the file link: https://itfam.pro/video-background-shopify-debut-theme/

After downloading and unzipping the file, change its name to: video_background.liquid.text and open it with notepad. You can then copy and paste it as directed in the video.

I hope this helps someone looking to add a mp4 (not a YouTube video) to their home page.

6 Likes
2

Thank you. I posted this as a solution to those looking for information on how to do it. :blush:

1 Like
3

Works great, thank you. Any way to customize the code so the video always stays 100% width and 100% height without being cropped? Also in mobile? It’s now cropping a lot off left and right…

1 Like
4

I’m not sure how to make adjustments … you might add the YouTube creator, or at the content link. I’m glad you were able to get it to work.

5

This did the trick for me! Thanks so much for sharing. The only thing missing is the sound that is on the video, but I reached out to Vadym for his feedback. Thanks again!!!

1 Like
6

Awesome!!! I’m so happy that it worked for you!! And that there’s someone
who can help w the details! Thanks, Robin

7

I’ve got one issue though, on mobile I see a black bar beneath the video, any ideas on how to get rid of it? I´m using the debut theme.

Thank you!

1 Like
8

I’m not sure how to make adjustments … you might add the YouTube creator, or at the content link. I’m glad you were able to get it to work.

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

10

Hi, does it work for dawn theme as well?

11

If you want this solution for any and all shopify themes, he made an updated version https://www.youtube.com/watch?v=wajvd9oL9Zg

12

Did you get a response about this. Would love to have this too!

13

I saw a few comments under the video and saw this solution:

  • “I actually was able to solve the issue. I had to change @media screen and (max-width: to 400px) vs original suggestion and it worked for me”

  • To fix the dead space under the banner, just comment out the video-background height in the CSS >>>> .videoBackground { /* height: 100%; */ position: relative; }

  • Solution for BLACK EDGE ON MOBILE : in the code that you pasted for your video-background, search for @media and change the max-width to 450px (this is the dimension of your screen when in mobile view) i then searched (ctrl+F) for ‘overflow’ and changed that from HIDDEN to ABSOLUTE… my webpage is now functioning properly on mobile and desktop view. hope this helps

  • Solution for BLACK SPACE: The remove the blank space beneath the video, change the style of .videoBackground { height: 100%; position: relative; } to: .videoBackground { position: relative; }

14

I just tested it, and it works with Dawn theme. Realistically it should work with any theme.

15

Hi, to remove the BLACK SPACE under the video on the mobile version with the button in it, which part of the code do I need to adjust? Can’t find it..

16

Thank You :grinning_face: