Part 1 Creating Background Video For Web Pages

Ther video plays when you test the site or the page.

It is becoming increasingly rare these days to visit a site where you don’t encounter a video playing, full screen, under the content. One of the questions I usually encounter around this technique is: ”How do they do that?”

The intention of this 4-parts series is to show you how to do it and ensure it plays smoothly. It is simply not enough to put a video a video into a <div> on a web page and expect it to play smoothly everywhere and on every device.

In this series I will be:

  • Encoding a video and using a couple of free tools.
  • Using a free Adobe Muse widget to add a video to the background of a page.
  • Showing the basic HTML5 code that will let you easily add a video to a web page’s background.

Before we start, it is important you understand one of the fundamental rules of web video: “Keep an eye on the pipe!” The pipe is the bandwidth used to play the video and stream it into the browser. Video, when you take it down to its fundamentals is nothing more than a series of 1’s and ‘0’s being fed into your browser at a certain speed called bitrate. If your device can’t keep up, the video will start and stop or, even worse, leave the user staring at a blank screen as the device wits to receive enough data to play the video. If you are targeting all devices and computers the bitrate needs to be somewhere around 2.5 mbps which is set when the video is encoded.

Video aimed only at PC’s can be encoded at 10 mbps or higher but have playback issues on smartphones and tablets.

Another issue you will encounter is on iPads and iPhones. Background video should play as soon as it loads. This uses the autoplay property of HTML5 video. Unfortunately autoplay is not allowed on iOS devices.

Keep this in mind if your project is aimed at a responsive design.

Another aspect of this technique is you need to clearly understand you have no control over what browser version is being used. This means video may or may not play in the browser. The reason being there are actually three video formats that may need to be created- .mp4, webm and ogg . Even then certain browsers won’t play HTML5 video which means you need to have a Poster Frame – a screen shot of a frame of the video- that will fill the hole reserved for the video. If you don’t have that poster frame, the odds are pretty good the user will be staring at a big white space on the screen

If you are shooting a video make sure it has a 16:9 aspect ratio. This is quite common with the majority of video recorders – eg: DSLR cameras, smart phones, GoPro – that are out there. This is the HD format. If you are working with an SD video which has a 4:3 aspect ratio and you try to put it into a slot that is 16:9 there is a good chance it will be letterboxed which means there will be black bars above and below the video.

Finally look at a lot of the background video out there. You may notice it is greyscale, blurred or the color depth has been reduced.

This is simply another way of reducing the amount of data in the video, which also tends to marginally reduce the file size. You also might notice these videos rarely have an audio track. Again this is done to help manage the stream, not to mention the fact it is considered bad manners to have audio play when the video starts.

With all of those cautions, it is still remarkably easy to add a background video to a web page. As long as you understand the constraints, fall in love with the user, not the technology and there is a compelling reason for its use, adding background video to a web page can provide your users with an engaging web experience.

How do you encode the video? That is the subject of the next part in this series.