Why Video?

You may be asking yourself…
Why does Pat have a video background on his homepage?
Why do I keep seeing video all over the internets?!
Well… Statistics…

88 Percent

According to Forbes (Via CodeFuel), The average internet user spends 88% more time on a website with video than without. Video is also great because it visually shows what you’re all about immediately instead of making a visitor read about it, especially since we know that people usually just skim web content. Mobile users love video, it’s modern and it builds trust in your brand if you do it right.

If that isn’t reason enough:

  • 55% of people watch videos online every day
  • Online video accounts for 74% of all online traffic
  • Including video on a landing page can increase conversion rate by 80%

1. Background Video

Silent looped background video as the homepage hero.

This is a great example – looped background video with many cut scenes. Centered play button to launch full movie. Modern off-canvas navigation with ability to scroll down for more. Bonus points for modern diagonal overlays with SVG animation when the site first loads. (Not affiliated with Denso)

2. Video Demo/Intro

Video demoing the featured product or introduction to the brand / company / mission

Another great example with a looped background that has a centered play button which launches a full screen video. (Not affiliated with Cochran’s)

3. Video Content

Specific video content showcasing your products, services, news, tips and support for your customers.


Cinemagraphs are a newer form of video that is more of a hybrid of photography and videography. It’s usually something very subtle moving with everything else frozen in time. You can see a few of mine like the waterfall background, car headlight and creepy mirror videos in my current homepage’s video background. I plan to replace those next time I venture outdoors.


So far, I have found Flixel to be the easiest way to create cinemagraphs – they have both mobile and desktop apps. Check out their website and gallery for some really cool examples of mind-blowing cinemagraphs.

These were a couple of my initial tests:

Best one so far #flixel #cinemagraph #tree #fall

A post shared by Patrick Johnson (@madebypat) on

#Indiana #indianacity #water #glass #cinemagraph

A post shared by Patrick Johnson (@madebypat) on

Inspirational Websites with Background Videos

Here is a collection of well designed websites with background videos that awwwards has put together.




siteInspire has a great collection as well:

Get a Professional

Nothing can tell your brand’s story better than a professionally done video shot specifically for your company.

Free Background Videos

So far, I have found coverr to be the best resource for free videos:

Stock Video

Stock video can be helpful to add a variety of cut scenes that you might not have gotten from your videographer.

In Conclusion

If your website doesn’t currently have at least 1 or 2 of these types of videos, it might be time for an update. Get a good videographer to shoot several creative high quality scenes for your brand and email me if you need a design refresh.