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!