20 Amazing Websites with Full Video Backgrounds

Gabrielle Gosha

Backgrounds are usually considered an afterthought — a simple start or the final finishing touch of a typical web design. While subtle backgrounds can fortify the other facets of your design, and gorgeous eye-grabbing graphics can garner attention, there are ways to make your design’s background even more versatile and effective. Nowadays, some sites are using video to fill the entire backgrounds of their web designs, and you can too. Try deviating from conventional wisdom that dictates that your background be simplistic and static. In today’s showcase, I hope to inspire you with these websites that feature full video backgrounds.

Uniqlock

uniqlock

Aaron Ohlmann

aaron ohlmann

From Scratch

from scratch

Sean O’brien

sean o'brien

Hanna the Movie

hanna

Marseille-Provence

marseille-provence

Matter

matter

Arcade Fire

arcade fire

Nike M6

m6

Working Element

working element

Random Dance

random dance

Squat Design

squat design

Marisa Passos

marisa passos

When Was the Last Time You Did Something for the First Time http://whenwasthelasttimeyoudidsomethingforthefirsttime.eastpak.com/

Gudrun & Gudrun

gudrun&gudrun

Goldfrapp

goldfrapp

Life of Pi 

life-of-pi

The Art of Raw

the art of raw

Ideal

ideal

Iuqo

iuqo

What do you think about websites that employ full video backgrounds? Does it distract you or inspire you? Which of these, if any is your favorite?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Miky Vacík

    A full background video can be nice when offset from the content properly. But of the 20 sites, only six don’t rely on Flash plugin (Marseille-​​Provence, Squat Design, Goldfrapp, Life of Pi, The Art of Raw, iquo), in many cases offering no fallback option. That could be definitely browsing distraction, at least for visitors without a proprietary plugin installed.

    • http://digifaceproject.wordpress.com Gabrielle

      That’s a great issue to bring up Miky, thanks.

  • Adam

    They inspire! But then again, I am but one audience – should be used carefully in the right context.

    • http://digifaceproject.wordpress.com Gabrielle

      You’re absolutely right Adam. I think full video backgrounds are one of those things that won’t work with every website’s content but they are inspiring examples.

  • Phil

    Most of the videos on these sites don’t work on my ipad, and few have fallback. An exciting idea that led to disappointment.

    • http://digifaceproject.wordpress.com Gabrielle

      Sorry to hear that Phil, maybe these are some issues that could be brought up to the website developers in hopes that they can make their websites more responsive and mobile/tablet ready.

  • Willabee

    I think they can work with some site designs as long as they are:
    * responsive
    * mobile first with a small resolution video
    * media queries for a medium and large version
    * Utilizes the video element with a polyfill and/or static image fallback
    * A prominent option to skip the splash introduction
    * Are absolutely relevant to the site content/objectives
    * If audio included, an option to turn it ON (not turn it off)

    That should keep the majority of our pundits happy.

    • Willabee

      Oh! and how about local storage/cookie to remember their preference not to show it again on future visits.

    • Willabee

      I feel an article is evolving!

    • http://digifaceproject.wordpress.com Gabrielle

      Willabee thank you for leaving such a great comment! Your suggestions should really be taken into consideration as I think it will be a great addition to those sites that want to use video backgrounds. Just like you I think that full video backgrounds should have a purpose and not be used just for the sake of being “different”, the same with offering the ability to turn off the sound. Once again great suggestions!

  • http://www.coolfields.co.uk Graham Armfield

    Whilst technically possible I have real problems with employing video as a background to a site.

    Firstly, bandwidth. I’d resent a website that assumed I wanted streaming video on my small android with a limited data package.

    Secondly, accessibility. Constant movement on a site can be disorientating for those with ADHD, OCD, autism, dyslexia, etc. None of the few examples I tried offered a way to stop the video or remove it.

    • http://digifaceproject.wordpress.com Gabrielle

      These are all very important issues to bring up Graham. I did notice you can’t stop the videos so as you pointed out it can be an issue with those with the mentioned medical problems. Video backgrounds are a nice addition to sites but hopefully those who employ it will offer some way to stop it for those who may have problems with the video.

  • http://villekoo.com Ville
    • http://digifaceproject.wordpress.com Gabrielle

      Very cool, thanks for the share