The New Age of Web Design: Video Backgrounds and Headers

They say a picture paints a thousand words. If that’s true, then what about video? In this article we explain the benefits of using stock footage to add a video background for your web page.

Here at Videvo, we aim to provide you with free HD stock footage that can be used and adapted in as many ways as possible – and this includes video for webpages. Whether you are designing a personal portfolio or customizing a company site, video can be a valuable addition to help make your webpage look polished, professional and ultimately stand out against others. And it’s now easier than ever before, particularly if you have access to a readily available source of free stock footage from yours truly.


But Why Should I Use Video?

videobgs-1

 

As the process of website creation continues to become increasingly simplified and more accessible, so too are the expectations for clean, modern web designs. Owning a website is now more or less essential if you’re a freelancer or run a small business, and with so many people realising the importance of a well designed website, how can you make yours stand out against the others? A good way is to stay up to date on web design trends and one of these latest trends is video backgrounds. Thanks to things like HTML5 video and jQuery, web designers have begun to experiment with adding video backgrounds instead of still images, allowing creators to add a personal touch to any site with videos that complement the webpage’s overall message.

But what if you want to follow the modern, large video background trend but don’t have your own HD video clips, or at least none that relate to your company, product, business, etc.?

That’s where free stock footage comes in. Whether you’re looking for free, large video background to compliment your site, or simply wondering how to add a big video headers to the top of your homepage, stock footage is a high-quality source that let’s you add that added flare to your site – and if you can get it for free then even better!


Which Footage Shall I Use?

videobgs-2

 

A few things to keep in mind before selecting a featured video clip for your site:

  1. The length of the video clip – You don’t want your website visitors to be watching an entire narrative as soon as they navigate to your site. Instead, you should aim for a clip that is between 10-15 seconds long and preferably something that loops seamlessly. Luckily, Videvo offers a good selection of HD clips that are loopable.
  2. Relativity of the clip – Videos for your web page should be there to amplify your site’s message, not as needless decoration. Make sure the chosen clip relates to your site’s atmosphere, product, etc.
  3. Size of the clip – Large video backgrounds, banners, and headers all call for videos with high resolutions. Videvo provides clips in full 1920×1080 HD resolution, which function nicely as video web page headers and big video backgrounds. Avoid videos with smaller resolutions (i.e. don’t try to use anything less than a 720p YouTube video as a video banner!).

Still need some help deciding? With free stock footage, the possibilities for video headers and backgrounds are endless, but below we’ve thought of a few free HD stock video clips from Videvo that we think would work for general website themes, all of which contain plenty of copy space for your web page text:

 

  1. Our newest ink flow collection – This batch of free stock video clips lets you choose from a variety of different colors that fit your website theme. All ink flows appear against a white background, so they give your video backgrounds and headers that clean look.
  2. Abstract clips with clean color schemes – The “Abstract” section of our site is filled with simplistic designs that will not distract from your website title and text.
  3. Video clips that show wide landscapes – Wide-angled nature shots are a popular choice for video website headers, because they are easy to loop and look great as large backgrounds.

How Do I Do It?

Well you’re kind of asking the wrong people here – we’re just simple video guys. However, SitePoint offers a nice video tutorial on how to go about creating a full-width video header for your website using Bootstrap:

You can also check out this article by Elegant Themes regarding how to add video backgrounds to a webpage using WordPress.


That’s about all there is to it! Hopefully you’re now prepared to incorporate free stock footage as a video background or header on your website. Be sure to browse through our entire library, notably the Backgrounds section of the site, to find the video header clip or video background footage that works best for you.

Best of luck on your web design journey, and see you soon!

The Video Team
www.videvo.net