: What makes a good header/background video? Many sites I come across use video to show off their work, what they stand for, or more about the culture of the company. These videos are sometimes

@Nimeshi706

Do you really need to follow the trend?

Don't ever do something because it's a trend. Do things because they're good for the user's experience because that is what's best for your company and your design. Think really hard about the implications that adding a large video to your site will have and weigh the other options you have. You don't have to use this technique to have a "modern" website.

Great videos are not easy to make. If you feel like a video is necessary, hiring a professional videographer to work with you is likely the best method.

With that being said, there are a lot of things to keep in mind when creating a video for your company's website.



There are two main types of videos used in website's header/into section: background videos (usually full size or at least covering the width of the page) and foreground videos. There are principles that apply to both of them as well as some principles that are only applicable to one or the other. Both can be very effective in creating a brand presence, reinforcing traits and objectives found throughout the website, and making a company feel more personal if done correctly - which are all reasons why they are used so often.

If you want to look at some good examples of websites who use video well, you can click any of the images below and also check out this list.

Since this answer is so long, here's the list of topics in short; I give more detail about each including examples beneath.

General principles


Know your purpose for the video
Reinforce, don't replace
Make sure the video follows good videography design rules
Keep it interesting
Make sure the video (mostly) follows your color scheme
Make sure the video quality is high


Background video specific principles


Don't use audio
Use real video
Make sure the video size is large enough
Make sure the video isn't too distracting
Make sure it loops well


Foreground video specific principles


Keep it short
Make sure the call to action is clear
Make it multipurpose
Make sure the audio is appropriate
Don't have it auto play




General principles

Know your purpose for the video

Everything in a design should have a clear purpose. Talk and think about what that purpose for the video would be before you start. Know exactly what meaning you want it to add to the website and some ways in which you plan to make sure it accomplishes those goals. This is the very first thing you should do, and once it's done you should analyze each step of the process to make sure it's meeting those goals or if the goals should be changed.

This purpose should be shown through the content of the video (meaning the people, interaction, application, setting, etc. shown) as well as the impression and connotation that the video gives off (which is by far the more difficult part). I talk about how you can do so in the sections below.



Click on an image to see the site/video.



Reinforce, don't replace

Never bank on people watching the video. A lot of the time, people simply will skip over it even if it is really awesome. As such, make sure that the important principles that are addressed in the video are available outside of the video in other parts of the website. Make sure the video supports the other content and purpose of your site - adding to it and not replacing it.

It's also impossible for search crawlers to watch a video and record the contents, so restating the important aspects and principles are good for SEO as well.



Make sure the video follows good videography rules

A good video follows basic videography rules such as having good framing, having a stable shot, only subtly zooming mid shot (or not at all), panning and tilting smoothly, having good lighting, etc. If your video doesn't have these things then it will look cheap and homemade.

There are a whole lot of other rules to follow when taking videos, but that's not the subject of this post. For more check out Vimeo's video shooting basics which are quite useful and look up more information yourself.





Keep it interesting

There's no point to making a video that people don't want to watch. That means that the content should be visually appealing and attractive. How it does so is dependent on the video and the purposes. The best way is to have an interesting video is to have an subject to shoot and to shoot it well.

Some general video techniques to keep things interesting include switching up the shot angles and directions, keeping final shot duration relatively short (1-10 seconds max, depends on the importance of the shot), and having proper framing and focus.





Make sure the video (mostly) follows your color scheme

Making sure the video goes along with the theme of the site is important, and the coloring is an important part of this. Try to make sure lighting, setting color, and object color roughly match the color scheme of the website when taking the video (or make the site colors match it after the fact). Often times post-shot editing can help bring out the color scheme more, but having a shot be way off in the first place makes for a badly colored shot in the end. This isn't the most important thing on the list, but it should definitely be considered throughout the process.





Make sure the video quality is high

Use a good camera. Use proper equipment to help make shots smoother. Having good equipment makes creating a good video sooo much easier.

Make sure someone who knows videography principles is the one taking the video and editing it and that they are putting those principles into action. If you're doing it yourself, practice in order to get better at it. Don't be afraid to reshoot things and throw out parts that don't work the way you want them to. Always make sure to take more footage than you think you need.

Remember that the video is a representation of the quality of work that your company does. Make it great or don't have it at all.






Background video specific principles

Background videos are ones that usually cover the majority, if not all, of the screen. They are usually placed behind some other content, commonly small amounts of text. Often times they are .gifs.



Don't use audio

The vast majority of the time, it's inappropriate to have audio along with these videos. They are meant to be background, additional to the page's content, not the focus. As such, having audio distracts users from the important content at hand.



Use real video

Since it's in the background, it's meant to be complementary to the content. Having an animated video or something demands more attention than most real life video because it's more foreign to us - it's not natural in our daily lives so it sticks out more. We don't want this to happen, so only use real life videos in the background.

The only exception to this is if your company does animations as its main purpose. Even then, it may still be better to use videos of your team making the work, it depends on the purpose of the video.





Make sure the video size is large enough

It goes without saying that the video used should be big enough to cover each screen without stretching. That means for full size screens we need to have videos with a minimum resolution of 1024 x 768 pixels, but it's best to aim for at least 1200 pixels wide. We can also prevent loading large videos for smaller screens by serving difference sizes of videos based on the resolution. Try to optimize the video load time however possible while not conceding image quality.

It might be a good idea to remove the video on smaller screens as much of it may be hard to see.



Make sure the video isn't too distracting

Again, we want this video to be in the background and supplementary. We want users to be able to still read and interact with that section of the site with the video playing and not be distracted from whatever user flow we want. If the video keeps the focus of the user the whole time then it isn't having the effect that we want it to.

Applying a slight mask or darkening the video can help drastic background changes not stand out so much. Sometimes making the entire video black and white or have a color filter can also help.

Showing people can be both good and bad. If done correctly, it can make users feel that the experience is more real and personal. If done poorly, it can make it seem impersonal and cheap. More on that here.

Faces in particular draw attention, so make sure they're an appropriate face and put them only where it really matters. It's generally best to not have them face the camera directly. Use a different angles of the subject. Showing a brand/spokesperson's face is very effective if done right, I highly recommend it if you can.



Make sure it loops well

Since this video is in the background, it should loop. Since it loops, it needs to loop well as to not distract the user too much. This can be done using various methods, including ending with a similar or the same shot as the start, using cuts well, or even reversing the video at times.








Foreground video specific principles

A foreground video isn't covered by anything and meant to be a really important aspect of the website. The two main types are commercial like ones and full interactive experiences.



Keep it short

Time is valuable. It's inconsiderate to take more time than is necessary to accomplish the goal. As such, cut out as much as you can while still meeting your goals. Also, the longer the video, the less likely people will watch all of it. The only time it's acceptable to not have it be relatively long is if the entire experience is a video or interactive experience. Even still, keep it as short as possible.



Make sure the call to action is clear

Throughout the entire video, make sure that it points to whatever message you're looking to convey. This goes back to knowing your purpose and implementing it well. Depending on the purpose, it could even work to actually say the purpose sometimes, whether it be text in the video or someone saying it audibly. In interactive experiences, users should be lead to know what to do next.





Make it multipurpose

Since you're hopefully putting a good bit of effort into this, try to make it in such a way that it's multipurpose. Something that you can use outside of just the header, whether that be presentations to potential clients in meetings or something else. Doing so can also enforce a more unified approach and help with setting the purpose and brand of the company. Obviously interactive experiences can't directly be reused off line, but videos of the interactive experience can be.





Make sure the audio is appropriate

The audio should fit the feel of the video and site. Usually that involves some type of background music unless it's an immersive experience type of video.

If you have someone speaking, make sure it's good quality, clear, and has proper grammar. Again, this is a representation of your company and the quality of its work. You want it to be great!

If you use sound effects, make sure they're great. It's very easy to find bad samples, very hard to find great ones. However, using bad ones makes the entire thing seem cheap.



Don't have it auto play

Most people don't expect websites to play music when the load a page, especially something with much volume. As such, most times it's best not to have audio playing. The easiest way to do so is to keep the video paused on page load, waiting for the user to start the video.

Another reason to not have it auto play is that you want users to see all of the video. If it auto plays and they are looking at a different web page at the time, they'll miss some of it.







Side note: If you're looking for a place to find good, looping, royalty free video, HTML5BackgroundVideos and FancyFootage.Club are good places to start.

Disclaimer: I'm no video pro, but I have spent a couple hundred hours shooting and editing videos and have spent much more time than that building and designing websites. Please comment with corrections and additions if you have any!

Vote Up Vote Down