September 20, 2013

Background videos are my latest web design obsession. You may have seen one or two in the wild – you load up a page and then a video starts playing as the background of a website. I haven’t done one myself yet but I’m keen to take you through what some other designers are doing.

Depending on the implementation, the experience can either add to the site or hinder the communication it was meant to enhance. Since I’ve been seeing this appearing quite a bit recently, I thought it would be interesting to study and see what insights we can gather. I want to look at some good executions, some pitfalls to be aware of and some of the technical aspects one might encounter when developing with full screen video.

So let’s take a look at some sites using background video.

Spotify

One of Spotify’s campaign sites use a video background, with the tagline “Music for every moment”.  The video shows various moments when you might be listening to music, some scenes are actually shot first person which is a nice addition. The site isn’t cluttered and you have clear actions: Either “get Spotify” or “find out more”,  In this case the video and intro/actions work very well together.

Spotify video background

But of course sometimes in a video there can be very bright areas (see below). When you have a white logo and white heading text you can have a hard time reading. If it was a static image you would have a legitimate problem on your hands, you’d have to find another image, change the levels… but that’s the magic of video, the problem is only there for 0.5 seconds. If the majority of your video or clip is quite bright then you might want to give it a darker overlay to offset the contrast.

spotify2

Q: What happens on iOS, Android?

Videos on mobiles love to be on top of anything else, the highest z-index possible. So for this case Spotify have swapped out the background video and replaced it with a full screen image fader. It works quite well and incorporates stills from its video counterpart. Good continuity, good fallback solution.

Q: How is the video scaling to the viewport? [Skip this if you’re not nerdy enough].

Go ahead, resize that website in your desktop browser and marvel at its ability to stay centered and cover the viewable area.  First off, the html and body tags need to be set at 100% height. This allows any child element to use height: 100% and scale to its parent. The video wrapper is full width and height, its position: fixed and has a hidden overflow (no scrollbars allowed). Now the real magic happens with the <video> tag itself.  Inspect the video element on the page and scale the browser window, you’ll be able to see margins changing dynamically left and top through JavaScript, also horizontal/vertical classes are changed depending on the aspect ratio of the viewport. All this together allows the centering and scaling of the video. Study it for yourself and dig into their “awe-wait-for-it-some.js” to find out more.

Q: What are the video specifications?

Optimising your video correctly for web is key, if your video is too high a resolution or bitrate it might lag and buffer a lot. Spotify offers two video file types ‘mp4‘ and ‘webm‘, check the links for browser support.  Here are the mp4 specs:

  • Length: 00:01:17
  • Frame size: 1280 x 720
  • Data rate / Total bitrate: 1721hbps
  • Frame rate: 25fps
  • Size: 15.8mb (WHOA NICE)

Life of Pi

Movie websites are always a bit cluttered and Life of Pi seems to stay true to that. After the site loads, you’re greeted with a low res background video and panels of information popping in vying for your visual attention. Strangely, after the first scene of the video the panels go into a hidden mode so you can enjoy the background video a bit more. They might have thought it wise to show the user some visual cues then hide them away to get rid of some clutter, it does work in the end. See below.

lifeofpi

Q: What happens on an ipad?

The background video is working! First question is how? We know background video likes to be on top for iOS so this is voodoo magic. Using Adobe edge inspect I can see that the SWF video is changed out for an mp4, but that still doesn’t answer why the video isn’t being brought to the front of the z-index and, more importantly,  how it’s playing automatically. More investigation need to be done which I don’t have time for in this update. I’ll update this blog post once I figure out how they’ve successfully shown background video in iOS, but for now i’ll leave you with a few links to check out for your own interest or study. I hope you enjoyed my little delve into background video. Leave a comment if you find some answers to the mysteries of iOS background video.