Creating A Homepage Looping Video Background

It’s all the craze right now: VIDEO. It’s engaging, it’s new, and it’s ‘different’.

Working at Bold City Agency, it’s our #1 requested feature on new site design. “Can I get one of those videos on the homepage?” We’re proud to say “Yes, yes you can!”.

While we have it down to a science as far as where we get the video content, the editing process, video hosting, and finally implementation, we know it still be new to some. Here is a great guide to getting started building background looping videos on your WordPress based website (or any site for that matter).

This will be a two-step guide to handling background videos. First we’re going to touch on gathering and editing the footage. Second, we’ll discuss implementation and coding.

First, it’s time to curate the video content. There are lots of paid sites out there where you can buy stock videography. We’re not going to get into those as there’s also some great free resources if you don’t have the ability or time to go shoot your own content.

Free Looping Video Resources:

Coverr – https://coverr.co/

My personal favorite. Awesome background video content with implementation instructions and even the ability to ‘preview’.

Distill – http://www.wedistill.io/

Another great resource for free, commercial use video snippets. A nice feature of this site is they will deliver the new videos to you via email every ten days.

Pexels – https://videos.pexels.com/

Known for their free stock photography content, they also have great video content that can be used commercially.

Vimeo – https://vimeo.com/groups/freehd/

Everybody has heard of Vimeo but most don’t use it to it’s full potential. Did you know it is possible to join groups where people give away free stock clips?

Mazwai – http://mazwai.com/

A good source. I don’t love the site design and it’s often hard to find the ‘type’ of stock footage you’re looking for but still a good resource.

As a general rule, I like to gather 5-7 clips that I enjoy. These will be spliced together and each clip will run approximately 3-4 seconds. This creates a video that is between 15-30 seconds in length. From experience, most visitors to your site will not watch more than 15 seconds of the homepage video. Plus, keeping the video shorter reduces the video size and therefore load time of the site. Remember, sound does not matter as this background video will loop in silence. There’s no reason to add sound, the majority of visitors will not listen and it also increases video size.

Once you have your clips, it’s time to get to editing. As a general rule, I like to start with a video clip that is fairly static. Reason being is your video may still be loading in the background as it begins to play. While a video is loading (or buffering), it may pause itself intermittently in the first few seconds of the clip. If you pick a clip that is fairly static, it will be less noticeable if it is skipping or pausing.

As a second note, it is a good idea to begin the video with a fade in and end the video with a fade out. Whether you choose to fade to black or white is up to you, but keep it consistent.

Once you have your video created and exported to an mp4 format, it’s time to find a place to host it. Some people will host the video on the same server as their site, this is not recommended. It’s best to have your video hosted on a different hostname than your main site for loading purposes. Personally we use a Pro account with Vimeo which works amazing. Vimeo Pro offers you the ability to call the direct file path of the video file rather than the typical ‘embed’. Vimeo has impressive video compression technology, which drastically reduces the size of your video. Plus, their servers are specifically designed to handle video streaming.

Vimeo Pro (at the time of this post), is $199/year and is available here: https://vimeo.com/store/pro

Once signed up and your video has been uploaded and compressed, your ready to implement it on your website. Stay tuned for part two of this post where we discuss implementation techniques and making your video background cater to responsive websites.