Solved

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

decli
Excursionist
25 2 22

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.

Accepted Solution (1)

decli
Excursionist
25 2 22

This is an accepted solution.

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

View solution in original post

Replies 15 (15)

decli
Excursionist
25 2 22

This is an accepted solution.

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

SKipp
Tourist
12 0 1

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…

decli
Excursionist
25 2 22

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.

Robin813
Tourist
7 0 2

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!!!

decli
Excursionist
25 2 22
Awesome!!! I'm so happy that it worked for you!! And that there's someone
who can help w the details! Thanks, Robin
Melinda5
Explorer
52 3 11

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

THMP12345
Excursionist
20 0 3

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!

decli
Excursionist
25 2 22

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.

Melinda5
Explorer
52 3 11

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; }
DIXDIX
Visitor
1 0 0

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..

Himanshukamboj
Visitor
1 0 0

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

gnaro
Explorer
66 0 17

Hi, does it work for dawn theme as well?

shortcomings
Excursionist
46 0 14

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

Melinda5
Explorer
52 3 11

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

ivonnebot
Shopify Partner
6 0 5

Thank You 😀