Great Examples of Video Backgrounds in Web Design

Videos have been used in website design for many years, but previously they have been mainly for informative purposes.

These days, following on from the full screen background image trend, we are seeing more and more sites using full screen background videos that play on opening without the facility to stop and start the video. Here is a selection of some great video backgrounds that make the visitor feel immediately involved and connected.

Video Backgrounds in Web Design

iSeatz

iSeatz is a booking engine for the travel industry. They have a night time cityscape video that has been sped up and there are lights darting all over the place, and lots going on. It gives the immediate impression of speed – which is no doubt their aim.

iSeatz

Fundacion Oso de Asturias

This site is owned by the Bear Foundation of Asturias in Spain. The full screen background video shows a bear in its natural surroundings. This video does have a pause/play button.

Fundacion Oso de Asturias

Genentech: Her2 Story

This site is dedicated to the fight against breast cancer, and focuses on one woman’s story. You have to look closely to see that this background is a video – Lisa doesn’t move very much at all! Here is a snippet of information from the site:

‘For the last 30 years, scientists, doctors and patients have been engaged in a war against Lisa’s particular type of breast cancer – an especially aggressive form of the disease known as HER2-positive. Developing medicines to treat it has been an exceedingly difficult task and over the course of those decades, there were many moments when it seemed they could not succeed. Though the battle is far from over, the progress they have made not only gave hope to Lisa and others, but also helped to fundamentally change the way we fight cancer.’

Genentech Her2 Story

Trainer Rx

A team of orthopedic specialists who have designed a technological approach to helping healthcare providers communicate essential information to their patients from injury to recovery. They use the excellent tagline ‘Getting back out there’, and a full screen video background of a guy on the sea.

Trainer Rx

Electrolyse Fontenaysienne

This French site are manufacturers of chrome products, and they use a full screen background video showing parts of the process.

Electrolyse Fontenaysienne

OuiSurf en Afrique

A site all about a surfing tour of Africa. The whole point of this site is the videos showing the experiences of the tour.

OuiSurf en Afrique

Riad 11 Zitoune

The promotional site for a hotel in Marrakech, a full screen background video shows the hotel and the city and culture.

Riad 11 Zitoune

Volvo Cars

The Dutch version of Volvo’s promotional site uses a very fast moving full screen background video of a car journey. Round ghost buttons and ‘dancing’ small circles complete the effect.

Volvo Cars

MIKII

This French web agency use a full width background video under a black transparency.

MIKII

1701 Franciacorta

This Italian vintner uses a full screen background video showing growing and harvesting grapes through to bottling wine. They use a patterned black transparency to help the foreground text stand out.

1701 Franciacorta

Leon Lauschner

How do you promote the manufacture of neon tubes? Well, like this… a full screen background image of the glass blowing and heating!

Neon Lauschner

Danner Vintage Boots

A full screen background video shows men riding vintage motorcycles and some of the process of boot-making.

Danner Vintage Boots

Travel Belize

This site is promoting Belize as a tourist destination. The landing page has a full screen video playing, and it also has a (slightly confusing) play button in the center of the screen. Clicking on this will bring up another video screen.

Travel Belize

Local Eyes Project

This project focuses on user submitted locations. The users submit videos and images of their home towns/countries. The opening page has a full screen background video following a mountain road.

Local Eyes Project

Thuis – We Get

This agency uses a full screen background video of a designer sketching their logo.

Thuis - We Get

Fabrica

This is really a masterpiece of website design. The full screen background video is, at times, divided into a card layout, and sometimes it has different things going on in each card, and others it still has the full screen video playing.

Fabrica

Parachute Montreal

This parachuting/sky diving school based in Montreal uses a full screen background video of… what else… sky divers!

Parachute Montreal

Shumway Van Attorneys

These Salt Lake City attorneys have used a full screen background video of clips of their attorneys consulting with clients, in meetings or just working at their desks. It is a good way to make what is, by default, a boring topic for a website more interesting.

Shumway Van Attorneys

Coulee Creative

This creative agency uses a full screen background video with a group of people dancing on and off the screen – the guy in the middle stays in place. The video is shown at about double speed.

Coulee Creative

Rodeo Drive

The promotional site for the famous Beverly Hills shopping street, Rodeo Drive. Video clips showing fashion houses, hotels, the street itself, etc., with the tagline ‘The intersection of luxury, fashion & entertainment’.

Rodeo Drive

Conclusion

Sometimes used simply for effect, sometimes informational, video backgrounds are making quite an impact currently. Some current trends, including this one, are only possible due to faster internet connection services such as broadband and fiber – but you can be sure that designers and developers will always make the most of any technological advances!

Do you like to use video backgrounds in your projects? Do you think they are only relevant to certain projects and not others? Please share your links and opinions with us in the comments section below.

Advertisement