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 in web design is to properly optimize so you speed up load times without sacrificing quality.
InspirationWeb Design
11 Great Examples of Video Backgrounds in Web Design
Gisele MullerDecember 9, 201310 Comments03k
Share
Gisele Muller
Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr
great collection! we did one of our own as well on teenster.me
check it out 🙂
Great list, checkout our site as well, we used video in the background of our new site launch as well!
forgot my website https://bradient.com
I will check all the videos, really its very nice too see. thanks for sharing with us….
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…
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.
Truly inspiring collection of websites with video background and also the website speed is also very well optimized.
And also great collection as usual!
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!
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: https://themeforest.net/item/magnum-creative-portfolio-template/6458953
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