Design Trends: Cover Videos
A craze that has taken the internet by storm is the concept of the cover video as the banner for a home page. Everyone's doing it, and we are frequently asked to incorporate video backgrounds into our website designs, but are they really all they're cracked up to be? This is a typical pro et contra discussion piece.
I'll start by addressing the cons, or contra arguments to this wild design fad.
Firstly the practical implications of embedding a cover video is more complicated than you might assume. While embedding a regular video for a visitor to play is can be achieved with relative ease - simply use a video hosting service such as YouTube or Vimeo and grab the embed snippet provided - the cover video concept is a bit more fiddly. We can't use a standard hosting service, the embed features provided just aren't designed for this use case, we need to embed manually using the HTML5 video tag. This presents us with the first challenge: web browsers. Web browsers are the archenemy of the web developer, they're all different, they render things differently, and none of them really follow the standards set out by the lovely people at the World Wide Web Consortium. Web browsers present the only compelling argument for a communist society, with only one option available we may stand a chance.
Web browsers use different rendering engines behind the scenes and therefore require different video formats - a detail that is usually managed by a video hosting service. In the manual method we need to produce and host 3 different file formats. Even then we face issues with autoplay on some browsers not quite working properly, supporting legacy browsers such as IE8 - yep, some people are still using a 10 year old web browsers, and the odd weird thing here and there, like Safari refusing to autoplay a video unless the "muted" attribute is set.
So we have our 3 file formats. The next issue we face is file size. Whilst an image can be kept very small, video formats are very large. This presents 2 issues. Firstly we have to pay for all the traffic out of our server. Fortunately for us the browser will only request the video file that it needs, rather than downloading all 3 formats, but it still takes much more bandwidth to send a video file than a single image. It's also a problem if the visitor to the site has a slower internet connection. We can offset this potential issue by prioritising a "cover image" to download first, so the space isn't blank. But a visitor on a slowing connection could still have scrolled down the page or clicked to another page before the clip even starts playing. All of this assumes the visitor is using a desktop device. Mobile presents its own challenges. Mobile operating systems have their own specification for playing videos, and it can often be a real pain to get a mobile browser to play the video at all - and when it does we're then draining our visitor's mobile data.
All of this to achieve a design concept that seemingly every other modern website on the internet is copying.
But there are upsides, and major ones at that. Whilst we have created a site that uses a well utilised concept, this can work to our advantage. Familiarity is a good thing. There's a reason that 99% of websites have their menu at the top of the page, or that mobile operating systems use a screen swiping system to display application icons: familiarity. We've found a system that works, that everyone is happy with and that looks good, so let's use it. We instantly make the visitor feel as if they're on a modern website, a modern website means the organisation behind the website is active, up-to-date, and cares about their visitors' experience. It's then up to the designer to carry the video through and integrate it into the design and to carefully make sure the website doesn't look too similar to other websites. Familiarity: yes, copy-cat: no.
We've heard the phrase "a picture is worth a thousand words", well a video is anywhere from 25 to 60 pictures a second, that's a lot of words. (Obviously a lot of those frames are morph frames with motion blur, and so similar to the previous and next frames that it isn't worth calling it its own picture, but we'll ignore that.) In the same width and height on the page we have the potential to tell a much more detailed story. We can articulate more of what the organisation is about by showing different examples in a video format. And that's what a website is about, we're telling a story.
So to conclude, should websites use video cover backgrounds? Sometimes; absolutely, other times; absolutely not, still other times; maybe. It's a case by case basis, my thought would be that if we're adding something to the page; if we're helping to tell the story, then let's do it. If we're doing it because everyone else is but we have no real reason to, then let's think of another creative way to tell our story.