Background videos can add life to any website, but there are a few things you need to know before you start using them.
If you’ve started playing around with background videos on your Webflow websites, you may have run into a few things.
The first issue I run into is: where the heck do I find one?
5 places to find free stock background videos
Now, obviously, a custom video tailor-made for the business makes the most sense, and can tell the most compelling story. But all too often, that’s easier said than done.
Production timelines and costs can become a blocker for many clients, and in some situations, a more general (i.e., stock) video can still send the right message — or at least serve as a proof of concept or placeholder until the real thing arrives.
With that in mind, here’s a few places to find background videos that might do the trick, or temporarily fill the gap.
Like the tagline says, Coverr offers “beautiful, free videos for your homepage” — and adds 7 new videos every Monday, so the collection stays fresh! Best of all, each and every video is 100% free, so there’s no surprises when you hit “download.”
Coverr boasts a fairly diverse set of video types, categorized as follows:
I’ve found the Tech collection pretty handy, myself. Coverr also accepts submissions, so if you make your own background videos, there’s a ready-made community for you.
While Vimeo isn’t itself a purveyor of background videos, many community members distribute free stock footage through the platform. It’ll take some searching to find just what you’re looking for, but you never know when you might strike gold.
Your initial visit to Mazwai might feel a little confusing since there’s literally no information on the site. But there are a host of lovely, often professional videos. And once you click to view a video you like, then hit the download icon, a lot comes clear.
There, you’ll see a download button, info on the maker and licensing, plus options to crop the video, grab a still, or mail it to someone else. All super handy and simple. Easily worth the visit, especially if you’re looking for videos focused on nature and/or urban spaces.
4. Distill (beta)
In stark contrast to Mazwai’s minimalism, Distill makes it all pretty clear from the first page load. These are free, curated, HD videos for personal and commercial use. With 10 new videos coming every 10 days — to your inbox, if you want.
The user interface (UI) needs a bit of work — you have to right-click and select “Save video as…” to actually download one — but it is in beta, after all. And with the beauty and volume of videos available, we forgive them.
5. Pexels Videos
Pexels has been one of the better free stock photo options for a bit now, so it should come as little surprise that they offer a solid video collection too. Probably the most useful aspect of this resource is the granularity of categories to choose from: instead of wading through all that “nature” has to offer, you can skip straight to the “trees,” if you want.
A note on file sizes
Just remember that large file sizes can seriously impact site load speed, so always be sure to compress your videos — look for more on that at the end of this post!
How to handle background videos on mobile
Lovely as a background video looks on a big, beautiful desktop display, it can spell doom for any website viewed on a mobile device. That’s why Webflow doesn’t play background videos on mobile devices.
To handle that issue, you’ve got two options:
- Replace the video with a GIF of the video on mobile screen sizes
- Replace the video with … anything else on mobile screen sizes
Whichever route you choose, it only takes a couple steps to achieve the look you want:
- Switch to mobile landscape view
- Set the video’s container to display:none
- Add your GIF, or other replacement, in a new element
- Switch to mobile portrait view
- Repeat steps 2 and 3
It’s that easy.
If you’re taking the GIF replacement route, just remember that GIF files can be really big too, so be sure to optimize your GIFs to avoid laggy load times. You can use something like Compressor or EZGIF (see below) to handle compression.
Here’s a few tools that can help you translate a background video to a GIF:
- Imgur Video to GIF (requires a hosted URL to convert from)
- Giphy GIF Maker
- EZGIF.com (handy because of the GIF editing tools also available on the site)
3. How to manage video file sizes
Webflow lets you upload background video files up to 30MB in size. Which seems like a lot — until you upload your latest video find!
Plus, given how much a video can impact your site’s overall load times, you need to do everything you can to minimize your video file sizes. That way, you can ensure visitors to your stay around long enough to be wowed by your lively background and drawn deeper into the site.
In researching for this post, I came across two great options. One’s browser-based and light on customization options, the other downloadable and packed with more customizability than you’ll (probably) ever need.
1. Clipchamp: straightforward and browser-based
If you’re looking for something quick, easy, and browser-based, you could do a lot worse than Clipchamp. Just upload your video, pick from a few basic output options, and — after everything’s compressed — voila, you’ve got a nicely compressed video background for your site. From there, you can download it, or upload to your favorite host.
Handily, Clipchamp also boasts a Chrome extension to make getting there that much faster and easier.
2. HandBrake: open-source, desktop-based, and crazy-customizable
If you want more video compression and format conversion options than you can shake a … handbrake … at, well then HandBrake might be perfect for you. Since it’s a desktop app, you also won’t have to worry about being connected to use it. Plus, if you’re not down to fiddle with every setting available, it features a few general and device-specific optimization profiles to speed up your workflow.
And hey, it’s free, so there’s no risk to trying it!
While you’re compressing your videos…
Remember that, in most cases, your background video isn’t the star of the show. It is a background video, after all.
With that in mind, consider keeping your background video short and don’t worry too much about its quality. This will allow you to compress your video further, limiting its impact on your load times.
If quality gets too low for your liking, you can always use a partially transparent color overlay or CSS filter to minimize the damage. Either method can also help improve the legibility of any overlaid text or other design elements, which never hurts.
Have any tips to share?
Whether you've found a great resource for free (or paid) videos, have tips on compression, or just had a great idea for designing around background videos, we'd love to hear what you think in the comments below!