Using video background in webpages

One of the hottest things in the web design world right now is video backgrounds. These allows you to create a complete image of your brand within just a few seconds.

A solid counter-argument for using video background is the bandwidth problem. When a user with a slow Internet connection enters the website, it will take long time to load the video, which some people believe will result in a high bump-rate. There is however however a very great solution to this. Web designers can make use of an image or a background color whilst the video is loading.

Styling the video and what’s around it

Just as with everything in design, there are unlimited design possibilities for the video backgrounds. In our homepage we two columns in front of the video, with different background color and content. Read this tutorial on how to use CSS to create two sections with different background color and separate content. Other web designers let the video background be in full screen, with- or without elements in the front. The styling of the video and the surrounding elements depends on what type of page it is.

What video to use?

Video backgrounds are quite new to use, which is why there is not yet a set design rule for which video that works with what template and colors, and there probably never will be such a rule either. Since a video is constantly changing its image and colorization, it is up to the designer to find a match between a good video and the webpage design.

On Theory 3 we use a video of growing flowers, which is a metaphor for growing companies. Other companies that use video backgrounds show the customers a tour of the office or a demonstration of the product(s) they are offering. What is important is to use a video that sends a message about your business model, whilst still being entertaining for the user.

If you choose to use a video someone else have created it is important that you make sure you have all the copyrights to use that video, so that you do not get in juridical problem.

Inspiration of great video backgrounds

Lately a lot of big IT companies have started using video background on their webpages. Spotify has a full-screen video background with some content in front. PayPal has a video background in the middle of the page, with a menu above and content below. A luxury yacht company called Y.CO Yachts have a inspiring video of when their yacht is in use. The product page of the sneaker Nike Jordan has a video background displaying the shoe’s features.

Faster loading

It is recommended to use an external host for your video, since that host then will automatically choose the closest hosting location to load the video for the users. Example of possible hosts are YouTube, Vimeo, Dailymotion. We on Theory 3 recommend to use YouTube since it has fastest loading time and easiest user interference. Remember that when uploading the video to an external host it will be open for public, and therefore it might be a good idea to copyright protect your video.