How to use video backgrounds for incredible visual impact, part 1

Full screen images used as the background of sites have an amazing visual impact, but did you know that you can use video in exactly the same way?

After all the excitement of working with HTML5 audio, I felt it was only logical to follow-up by moving into the next realm of online rich media: the one and only <video> tag; an element introduced in the HTML5 specification, which has made the implementation of video within web layouts a virtually painless task.

In today’s video, we’ll be taking a look at using a hybrid of the <video> tag and some jQuery magic to create a full-screen background for your own website designs. Like the background-size: cover CSS3 parameter, the script will cause the video to automatically scale up and down to fit the window, whilst cropping when required to retain the aspect ratio — no stretching here!

Have you used fullscreen video as a background in one of your designs? Do you have a preferred method of implementation? Let us know in the comments.