Background Videos – Good or Bad ?

Are Background Videos a good or a bad thing ?

What this article is about

Lately a lot of websites have been showing the use of muted background videos on their sites. What kind of video should you display ? What are the benefits and disadvantages ? Is it good or bad ? And ways of implementation for your website will be discussed in this article.

The Advantages

A good video will be setting you on top of your competitors with a unique and attractive website. It’ll also help to convey your visitor of your product.
Additionally you are also going to raise the average time spend on your site as well as raising the attention for your product , if it is a good video.

The Disadvantages

I have done a lot of tests just to find out that I personally would not be using videos. The technology to play videos in the background is just not here at the moment.

You are not able to manipulate the browsers cache, as a result you will be getting a short reload once the video loops. You can workaround this by doing small cuts in your video. Now once the hick-up on the loop happens it will just look like another transition.
Baboom‘s developer site uses this kind of transitions on their background videos. If you have a very close look you will notice the hick-up. This nevertheless is very system dependent. On some systems it may run without any hick-up at all.

Baboom showing a great way of using background videos and raise the attention of the audience.

Baboom showing a great way of using background videos and raise the attention of the audience.

So that means that no matter what you do, you have no chance of a seamless transition. Yes there is the loop function but try testing that cross-browser on different systems and you will see that it won’t loop fluently.

There is no mobile support. Do whatever you want to, but video autoplay is blocked on mobile systems.

Video files are still huge in file size compared to an image. On another note: I actually never hear my MacBooks fan go loud. But while loading in the 720p footage, it got hot and constant fan running as well as a high battery usage. Now you will probably say that I should have used a 240p footage instead. But for my purpose the video was just so terribly distorted that it would have been a bad choice to burden up my visitors with additional bits and bytes just to load a crappy rendered video.

Mobile first erm … last

Mobile operating systems such as Android or iOS (probably windows phone too) can’t autoplay a video. Reason for this , it is blocked. The only workaround will be to place a trigger element which fires up the video once you touch somewhere. This nevertheless is not a good way to tell your visitor to watch the video as they do not expect it. Additionally bandwidth is a huge concern with limited data plans. Not everyone is running unlimited flatrates on their mobile devices.

A workaround to get your video to autoplay without any fiddling or hacks is a .gif file. Although you should keep in mind that gif is kind of an old format and does really badly on compression. So try to get the optimizations as high as possible (shorter clip, less colors, black and white..) and the dimensions as small as possible.

Relate the video

The video in the background should not be placed without any thought. It should add up to the experience and brand or topic of your site. Don’t use a video just because it looks cool.

I want a video background…

Do it yourself
If you are familiar with a camera or 3D applications you could easily throw together your own animation.

Finding stock footage
The first thing you will notice when looking for video backgrounds will be the trouble of finding good ones.
Free quality stock images are hard to find , free video footage is even harder so do your research even if it takes longer or go ahead for premium paid resources.
To get you started for free here is a list:
http://thecliparchive.com/

16s
In the music world it is known that after the first 16seconds the brain won’t be able to recognize whether a beat is random or does repeat. Use this knowledge for your looping background videos ! It will also help you to avoid the hick-up on the re-buffering to be noticed.

Which format should I be using

My favorite format is WebM. It is a great lightweight codec which runs very well. But webm won’t work on all browsers. More on this topic will be shown in the implementation part.

Dimensions of my Video ?

A pretty easy question to answer but not a general rule. As small as possible. Nevertheless this does not mean that you should simply go for 144p on every video. You should try to keep an eye on the length of the video, the file size and the reason why you put in that video. Is it a video about the presentation of your product and you want it to be prominent the first 10s then you have to make sure that the quality is alright and boost up the resolution. This will of course effect your file size.

For smaller dimensions I recommend using an extra layer with a pattern such as little boxes. This pattern is going to help you to hide little imperfections.

Implementation

This is the html part. You will need to use a few codecs to satisfy different browsers.
Keep in mind that the following versions do support the video tag:

  • Interet Explorer 9+
  • Firefox 26+
  • Chrome 31+
  • Safai 7+
  • Opera 19+
<video id="hvid" preload="" autoplay="autoplay" loop="loop" width="300" height="150">
    <!-- IE , Chrome , Safari , Firefox -->
    <source type="video/mp4; codecs=" avc1="" 42e01e="" mp4a="" 40="" 2="" src="video.mp4" />
    <!-- Chrome , Firefox , Opera -->
    <source type="video/webm; codecs=" vp8="" vorbis="" src="video.webm" />
    
Sorry, your browser does not support the <video> element.</video>
    <!-- A message if video can not be played --></video>

And the css

#hvid {
position: absolute; 
right: 0; 
bottom: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto;
/* Fallback for mobile devices and older browser versions 
   Instead of a video it will show the background image you defined */
background: url(bg.jpg); 
background-size:cover;

So… Yes or No?

It always depends on your project and what kind of video it is you are trying to display.
If the video has a high importance then you will want to display it. There is not a reason not to make it autoplay in the background even with sound.
But if you are using a video for plain visual aspects without any relation think about it twice. Why am I saying this ? Because you are essentially forcing your visitor into a horrible experience with long loading times and a bad video just for the sake of having one.

Images are not worse

Words may describe things , but pictures can carry a million thoughts. So probably try finding a good fitting stock image and focus on your products and content instead of useless effects. This is something you should keep in mind at any time. If something can be taken out without affecting the experience it means that it should not have been there in the first place.

Keep it simple and focus on the important things. Do not jump on a fashion train but do your own thing and work out the details than wasting your time with trends.