Video backgrounds on a website are bold and beautiful. Find out why video backgrounds are here to stay. Plus, discover tips for using videos in your design correctly, and learn how to add your own.
Video backgrounds can engage visitors.
A beautiful video background can quickly grab attention and immediately immerse your visitors.
Video backgrounds convey your vision better than an image.
If a picture says a thousand words, a relevant video can say even more.
Video backgrounds set the tone, mood and feeling.
Instantly convey the tone that you want to set for your website.
Video backgrounds elevate your website style.
Especially for luxury product or highly visual websites, video backgrounds can give your site a high-end and cutting-edge look and feel.
Do’s and Don’ts of Video Backgrounds
Do make sure your text is readable – ensure that your text is laid out beautifully with your background video so that they work together.
Do choose a video that is relevant for your site – your video should help you convey the message or vision of your site. Ensure that your video does not mislead users about what your site is about.
Don’t choose a video that is too long – it can slow down the loading time on your site and decrease performance. Just 10-15 seconds is ideal – Feel free to use an optimized, copyright free video from Website.com’s library!
Don’t distract with your video – if you video is too busy, or clashes with the text, it can do more harm than good.
Don’t include sound – these days, users find autoplay sound videos to be jarring or annoying, and can cause them to leave your site ASAP.
Don’t use a poor quality video – videos that are unintentionally grainy, or shot with poor lighting can make your website look cheap.
Ready to elevate your website?
Here’s how to add a video background to your website on the Website.com Editor
When you’re logged into your account:
Click Add > Strip > Video Strip
Click on the video strip to change video or see your customization options.
You can upload your own videos, or click the Stock Videos tab to see the stock video library. Click Use Video after you’ve chosen your video.
Adjust the height or drag the position of your video strip to the desired location. It is most common to use a video background as the background of a hero section (the top part of your website), or as a background for a specific section on your site.
Next, use the Change Layer tool on the top right tool bar to ensure that the Video Strip is placed below all text and any elements that you want to appear with your video background.
You’re done!
To wrap things up, take a look at screenshots of some of our favourite videos included with the Website.com site builder:
Note that Video Backgrounds are available with all paid plans. Free plan members can still test out the video background strip, but videos will not play on their live site.