How Do I Make A Video My Entire Website's Background? (Dawn)

Store Design
1

I’ve searched high and low and have not found an answer. I am looking to make a 15 second loop video the background of my entire website, no sound, no play button etc but just behind all of my products.

I have seen a lot of people’s suggestions but I just end up with a one section video with text over it where as I want it to be the whole background.

I have also tried the app SC Background Video but it shows black when the website first loads and has to be used with a youtube or vimeo link, I think i’d prefer just a simple code to add with my video url from files?

website: https://blobby-8544.myshopify.com/

pw: untora

2

You can create a looping background video on your website using HTML5 and CSS.

3

what part of my theme code should I add this to? thanks

4

@Yeady123 what part of my theme code should I add this to? thanks

5

Place this code in the body of your HTML file, and make sure the video file is hosted on a reliable server and has a direct URL that can be accessed. Note that you have set the video to autoplay and loop.

Hope you can do it yourself now

6

@Yeady123 Thanks it worked, although there is black bars at the top and bottom of the page and the video is playing with a black hue to it at the beginning, can this be fixed? thanks :slightly_smiling_face:

7

Yes, this can be fixed. To remove the black bars, you can adjust the aspect ratio of the video to match the aspect ratio of your website. To fix the black hue, you may need to adjust the brightness and contrast of the video or use a different video file.

8

But if I adjust the aspect ratio of the video to my website, it won’t show nicely on the phone one, does it? Do you know how i can solve that?