Background video is a beautiful thing. But without following some important guidelines, it can ruin your site’s performance and mess up the overall design and experience. Before we dig into those guidelines, let’s make sure we’re up for adding background video to our site.
When to Use Background Videos
Best practices for adding background video
Only use a background video when it will truly improve your site’s look and feel. It’s tempting to grab onto a shiny, new thing without considering its impact. While the impact will be minimal if done right, your site will be slower. Trading a static image for a video must be worth it.
Here are some things to consider:
- Choose a short video that will load quickly. Save feature-length films for the theater.
- Don’t use sound. Sound adds to the file size and adds little value. Unless you consider forcing visitors to scramble in search of ways to turn off their sound valuable.
- Use a placeholder. If the video is stopped or can’t be played, make sure there’s a fallback image. Creating placeholders in Webflow is easy. Place your background video element into a section with a background image in place.
- Replace the video with an image for the mobile experience — videos either don’t play or are difficult to implement on mobile. It’s also impolite for sites to hog a user’s mobile data with background video. Replacing the video with an image in Webflow is also a cinch. Hide the background video element at mobile breakpoints to reveal the background image. Doing so provides the best experience for the mobile visitor.
Here are some things to consider:
- Choose a short video that will load quickly. Save feature-length films for the theater.
- Don’t use sound. Sound adds to the file size and adds little value. Unless you consider forcing visitors to scramble in search of ways to turn off their sound valuable.
- Use a placeholder. If the video is stopped or can’t be played, make sure there’s a fallback image. Creating placeholders in Webflow is easy. Place your background video element into a section with a background image in place.
- Replace the video with an image for the mobile experience — videos either don’t play or are difficult to implement on mobile. It’s also impolite for sites to hog a user’s mobile data with background video. Replacing the video with an image in Webflow is also a cinch. Hide the background video element at mobile breakpoints to reveal the background image. Doing so provides the best experience for the mobile visitor.
