10 Jaw-Dropping Sites Featuring a Background Video

By Scott Stanton | 4 comments | Inspiration, Roundups, Web Development

Tweet

Websites with full page backgrounds are pretty cool, there’s no doubt about that. Whether you’re using Flash to achieve your full page background, media queries in CSS, or simply setting your height and width to 100% and not particularly caring about the quality of the image, the outcome is usually one that will catch the eye of a viewer. But seeing as we live in the broadband era, why not take things up a notch and have a full-screen background video? Let’s take a look at some examples of sites with full-screen background videos.

Razorfish

Razorfish is a design firm that utilizes a full-screen background video in a rather unique way. The video is a live feed of one of their offices, and you’re able to select which one you want to view from a menu at the footer of the page. Take a virtual trip around the world without ever leaving the lobby of a Razorfish office, very cool concept to go along with a very creative website.

Gudrun & Gudrun

Gundrun & Gundrun is a clothing site that’s oozing with urban character. There’s no doubt in my mind where this company is from and who their target audience is. Nestled in the city that never sleeps is a clothing website with a very artistic, full-screen, background video.

Wayne McGregor – Random Dance

The Wayne McGregor Random Dance site is another website with a very artistic full-screen background video. But would you expect anything less from a dance studio? An interesting thing about this site is that the video only plays on the homepage, once you begin to navigate through the site the background switches to full-screen images.

White Lies

The White Lies website is proof that not all white lies are bad. They make use of their background with a full-screen video of a live performance. The video quality is quite good and there’s even a buffer bar at the very bottom of your screen to let you know how far ahead of the game you are. Another thing I really liked about this site was the option for a background slideshow, in case anyone’s browsing the site from their high speed 56k dial-up modem.

Matter Strategic Design

It’s no surprise that a design firm would utilize such a foreword thinking design concept as a website with a full-screen background video, and that’s exactly what Matter Strategic Design did. Their background video is quite interesting, just a series of close-up face shots of people smiling. Their site is not cluttered with links as to overshadow the video, rather they just feature a simple dropdown menu with links to their work.

Less Rain

Being from the Pacific Northwest where rainfall is just a way of life, I had to chuckle when I came across the name of the German digital creative agency, Less Rain.  It’s no surprise that an agency with as many awards as they have also has a creative online presence. Their background video is more or less a background image with a video loop of a passing train. A clever way to sneak in a background video without bogging down the load time of a site.

Nike Jordan M6

Nike has developed a reputation for developing extremely progressive websites for some of their specific brands and the Nike Jordan M6 microsite was no exception. The site features full-screen background videos that are short clips of the shoe designers discussing the making of the M6 through various stages of the process. The navigation is not overly invasive, simple text links tucked away in a corner to the other videos and features of the shoe. A very clever and very well done site.

I Surf Because

I Surf Because is a microsite from Billabong that allows visitors to create their own statement on why they surf. The site features a full-screen background video clips of surfing enthusiasts doing what they love. There is a soundtrack that accompanies the video, which you have the option of muting, as well as some basic navigation at the top. After you leave the homepage the video background is swapped for some hi-res, full-screen images.

Russian Standard Vodka

Russian Standard Vodka is said to be every bit as good and high quality as Grey Goose, by taste testers and industry insiders, but a fraction of the price.  All I know is that both have pretty cool websites, but Russian Standard has the slight edge thanks to their use of video as a background element. Along with the main navigation links in the top right, you’re able to control the background videos by hovering on the bottom of the page to produce the video options. Very cool, very clever, very well done, dare I say, just like the drink?

Design Kitchen

DesignKitchen is an extremely good use of video for a background image. As their site states, they specialize in making high-definition videos for premier Motorola technology platform. The background video is a hand swiping and sliding through a smorgasbord of different videos and showing the extensive diversity of what they can deliver to their clients. The site also has a standard navigation and news feed that is subtly overlaid as to not interfere with the video, but easily identifiable and simple to use.

Using a full-screen background video is certainly a great way to grab the attention of your viewer. Whether the video you choose to feature is one that showcases your talent and portfolio or one that is pleasing to look at and doesn’t do much more than add a spark of life and uniqueness to your site, one think to consider during your planning process is how to keep the video size small as to not bog down the load time of your site. This can also be done by offering the viewer to switch to a slideshow, simple background image, or just stop the video all together and leave it at that.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.