How to add a video background to the any Shopify theme

[bigbadwolf]

Best video ever. For anyone with black box problem on mobile do this:
1. Delete all text in the video slideshow
2. go to edit code in line 199 and change the @media line from 767px to 300px
step 2 wont work if you didnt delete the text before!

[yenniluciapenadaza]

you can't imagine for how long I've been looking for this! Thanks a lot! it works perfectly!!!

[CryptoBits-bt]

hey everyone, i have noticed that some of you have a black bar problem in the mobile version of the code , here is a solution that will work 100% it took me some time to find the issue, hope it will halep you,

1) first go the line 217 in the code .
2) change the padding: 40px 20px;
3) change it to padding: 0px 0px;

its easy and it will not crop you video or make it zoomed in this has worked for me pretty well, if for some reason it doesn't work for you let me know .

and also for everyone saying that vadym beletskyi is ignoring the comments lets just think for a moment that he is from ukraine and iam sure that the last thing on his mind is reading his youtube comment
lets be understanding , he hasn't uploaded for 2 months .

have a great day everyone .

[tokangel]

Man, you're a true legend... I'm waiting for your next video about adjusting the size in order to fit perfectly on mobile device. Thanks a LOT for this great content, very useful !!

[Merkabuy]

This has huge potential, now it needs to just be adapted to work on mobile and remove that huge gap bellow the video that is created and it would be an amazing tool

[savannahlorena]

You deserve an award for this thank you so much for your help! The best video tutorial

[jeromeyoung]

Man I have been driving myself crazy trying to figure out how to get the video object to work, but after seeing this video using video_url that's just as solid of an approach! Thank you, for making this video you're a true lifesaver!!!! 🙏🙌

[photoshop]

thank you, this video is simple and exact to the point. I managed to set up video on my shop very quickly, best tutorial video by far

[chrisstarkey]

Mate, you are such a legend for sharing this! Thanks so much - if you don't work for Shopify they should probably be hiring you

[lparkross]

Thank you SO MUCH! That was the first time I ever tried using code and it worked! Your video was so easy to understand

[MrBozghale]

Thank you for this, 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?

[Metalvain]

Absolutely just what I needed and it works great in 2024. Thank you! Subbed!

[mortezaakbari]

Thank you Vadym, it was very useful, only took five minutes

[kennethmoras.]

Thank you for the right guide and tutorial for add the video section to shopify theme

[Chris-tizy]

Yeaaah!! Thanks Vadym, !!this works!! been looking for a while. Is there a way I can change the size to make it half the screen size?

[irfan]

To fix the dead space under the banner, just comment out the video-background height in the CSS >>>>

.videoBackground {
/* height: 100%; */
position: relative;
}

It will work after that.

[eryero]

BRO!!! you're a legend my guy, thank you for everything!

[symmie]

wow thank you so much. I tried 5 different ways before but this was the only one that worked. and the easiest!!

[boonievisorco]

The remove the blank space beneath the video, change the style of
.videoBackground {
height: 100%;
position: relative;
}


CHANGE TO:

.videoBackground {
position: relative;
}

[Teddyg]

This was awesome! Has anyone else had an issue with the text displaying below the video on mobile?