11 Great Examples of Video Backgrounds in Web Design

By / Dec 9, 2013 / Inspiration
shares

Video backgrounds were certainly very popular during 2013. And since this trend is still staying strong among designers, we decided to gather a few examples of websites using this approach to grab the attention of their visitors. The key with video backgrounds is to properly optimize so you speed up load times without sacrificing quality.

Coulee Creative

11 Great Examples of Video Backgrounds in Web Design

Risk Everything

11 Great Examples of Video Backgrounds in Web Design

Exponent PR

11 Great Examples of Video Backgrounds in Web Design

L’attrape reve

11 Great Examples of Video Backgrounds in Web Design

Waaac

11 Great Examples of Video Backgrounds in Web Design

Spry

11 Great Examples of Video Backgrounds in Web Design

Poolhouse

11 Great Examples of Video Backgrounds in Web Design

Positive Advertising

11 Great Examples of Video Backgrounds in Web Design

Whiteroom

11 Great Examples of Video Backgrounds in Web Design

BKWLD

11 Great Examples of Video Backgrounds in Web Design

Whiteboard

11 Great Examples of Video Backgrounds in Web Design

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

10 Comments

  1. Website Design Malaysia
    December 9, 2013

    great collection! we did one of our own as well on teenster.me

    check it out :)

    Reply
  2. Jason
    December 9, 2013

    Great list, checkout our site as well, we used video in the background of our new site launch as well!

    Reply
  3. Gildardo Perez
    December 9, 2013

    forgot my website http://bradient.com

    Reply
  4. Katypeterson
    December 10, 2013

    I will check all the videos, really its very nice too see. thanks for sharing with us….

    Reply
  5. starr
    December 10, 2013

    We used to get squealed at for animated banners, yet now they want a whole screen of motion on a landing page? Each to their own, but this just doesn’t work for me. I found it distracting and totally unnecessary. And SO big! I think things like this are simply a matter of taste…

    Reply
  6. Andy A
    December 12, 2013

    I think it’s a cool idea for some things but…

    The first one, coulee, could have tried some image stabilization, quite dizzy making especially when the camera is above the girls head. Going down through the list it’s seems it’s not the only one either, focus issues, camera shakes, etc.

    I guess for the usual fare here of design agencies, web site designers and advertising/marketing agencies, that sort of “ooo we are edgy, looks it’s black and white and slightly blurry but it’s ART”, is par for the course. But surely one of the issues here is that high quality bespoke video costs high quality bespoke money and unless you are limiting yourself to something you took with your smartphone it’s going to be out of reach to a lot of people who want a website.

    Also just to mention, I’m seeing this with my work PC, which I feel is pretty much typical for its type, it’s an older dual core, not high powered box running Chrome on XP, but it’s had the traditional cheap upgrade of a big monitor with a lot of pixels. End result, a lot of those sites felt clunky and slow, dropped frames and other jerkiness.

    Reply
  7. Steve
    December 15, 2013

    Truly inspiring collection of websites with video background and also the website speed is also very well optimized.

    And also great collection as usual!

    Reply
  8. Alisiya
    December 18, 2013

    This article is very helpful. I was looking for an inspiration to create a video that will be good enough to go as a main background on the website.

    Thanks!

    Reply
  9. Jacky
    January 6, 2014

    Very good article, thanks for sharing! Video’s will certainly become a new trend in webdesign. I think automatic played video’s are annoying though, especially when there’s audio involved and you forgot to turn off your speakers.

    I think this template is a good starting point to display video’s where the user is in control of the video: http://themeforest.net/item/magnum-creative-portfolio-template/6458953

    Reply
  10. Anistock
    January 20, 2014

    Gisele,
    The above sites really are great examples of how a video can be worked into a website design. I agree with the comment Jacky made about audio as sound needs to be an optional selection. The key to using a video background is the correct selection of format/player plus ensuring it can stream so it does not slow down the load time.

    Brian

    Reply

Leave a Reply