So you want a background video for your website, and for good reason! Sure, they’re all the rage right now, but you’re not just jumping on the bandwagon. You recognize that the popularity of background videos in modern web design is for a reason. They look fantastic when properly implemented, breathing life into what is often a pretty static medium.
However, improperly implemented they can have a pretty negative impact on both your site’s aesthetic and it’s performance.
Well, we certainly don’t want that! So how do you make sure your background video is helping your site instead of hurting it? Stay tuned, and we’ll stick a few tips to the wall.
You can’t just stick any old video onto your site as a background! Background videos have a few requirements specific to their particular situation that many other videos wouldn’t have to worry about.
Keep It Short — Given how much time we spend optimizing website images to load quickly, it should be a given that website background videos would also need a lot of optimization love. Keeping the length down goes a long way to reducing the size of the file you are delivering. Try to keep your background videos to 30 secs or less. If you make it so your video can loop, you can make a pretty short vid seem much longer than it really is.
Keep it Small — Keeping it short is just one way of making sure your file size is a tiny as it can be. Another important way is to make sure that the video you use is as highly compressed as possible. You’ll want to limit it to 720p and keep the framerate down to 24 or 25 frames per second (fps). You’ll also want to try a bitrate in the range of 750k to 1250k.
Keep it Simple — Remember that your background video is not going to be the primary focus of whatever page it lives on, it exists to complement other content. To that end, it is important that it not pull too much focus. Avoid videos with shakey motion, quick cuts, text overlays or anything else that might distract visitors from engaging with more important parts of your site.
Keep It Silent — Background videos shouldn’t have sound. Period. Not only is sound super distracting, and auto-playing sound a serious no-no, but removing the audio track from your video entirely allows to slim the file-size down even further.
But I’m Not A Videographer!
You may have access to a team who can create videos for you, or you might be an ace editor yourself, but for those of us who have little to no video creation skills, there are a few places you can go to get background videos to use for your site, no editing required! While a number of places offering background videos have popped up recently, we recommend taking a look at Coverr and Pexels. There are tons more out there, to be sure, but those two sites are a good jumping off point.
Putting it in Place
Alright! You’ve got yourself a relatively short, highly-compressed and not too distracting video and you’re ready to put it on your page. Now what should you do with it!?
Stretch It — You’ll want to make sure that your background video stretches all the way across whatever element you want to use it on, whether that be the hero section of your home page or the entire screen. You’ll also want to make sure it does this across a variety of screen sizes and devices.
Overlay It — One of the downsides of all the compression we did to keep the file-size down is that is causes a degradation in the overall video quality. If that quality-loss is particularly noticeable in your video, one thing you can do is overlay the video with a semi-transparent colored or textured layer. This can help cover up some of the more egregious compression artifacts, and colored overlays have the added benefit of providing needed contrast between the video and any text you may choose to lay on top of it.
And that’ll do ya! Want to get a super-delicious, highly optimized background video on your site? Give the design team at Solamar a shout, and we’ll have you up and running in no time.