21 June 2016

Website Video Banners

Video banners are quickly growing in popularity, as Internet speeds are increasing, browser technology is advancing, and its becoming more and more important to get your message across quickly…

Down Arrow
Website Video Banners

Granted not every project can benefit from this type of server-intensive design technique. Yet using a keen setup paired with careful attention to detail, fullscreen video banners can give the right website that big impact you may crave.

Our top tips to pulling this effect off.


The most effective way to use a banner video is to build a heavy contrast between the video and the page text. A simple rule of thumb is to lighten text with a dark video or darken text with a lighter video. It definitely helps if the footage is mostly uniform with just a few colours.

No audio

I’ve lost count of how many times I’ve quickly crossed off a window because of the unrequested noise. It’s something that’s almost never expected, which means it’s unwelcome and just annoying. A video banner is usually autoplay, which is fine, but as a rule we’d always recommend no audio. This not only speeds up load time anyway, it negates the risk of a user leaving your site just because of the sound.


This technology is still in its infancy (generally speaking), so its not going to work on every website browser. The problem with any new technology is people viewing your website on old technology. It’s OK don’t panic! You can still use a video banner, but with some simple code you can have the video swap to an image for your visitors using old tech. This way your website still looks like a website, instead of having some dead white space at the top of the page.

Load speed

As I said earlier with increasing Internet speeds, (thank god!) this is becoming less of an issue. However video files are not as big as you may think, a Video has a more natural method of scaling. A 1080p video might look amazing scaled on the larger iMac, but video with a reduced file-size should still look pretty darn good and load a lot quicker.

Mobile Visitors

Mobile internet speeds (4G) are definitely getting better around the UK, however our mobile plan providers seem to be holding us ransom for data usage. A common data package is from1 to 3 GB of data month, which with Facebook, Instagram, Youtube etc.. doesn’t go far. Your website designer should be using best practice by making your mobile site as lightweight as possible, and this includes swapping that nice video to a lower-res image.

Banner images are still the most popular choice, not every website warrants it or has the budget for a video. We’ve done a few video banner projects now, and below is a link to a job we’re very pleased with that features a video banner.