Background video on tablet/phone? Or still image?

Question

As I understand videos won't auto play on tablets/phones to prevent user from using unwanted data. At the same time there's a trend on using videos full window backgrounds. I was wondering what's recommended to do on mobile sites?

1. Remove the video and replace it with an image?
2. Load a still image and give the user an option to play the video?
3. Load the video (paused) and give the user an option to play the video?
4. Maybe use an animated imaged?

Please keep in mind that background videos are not the main focus of the website. So these videos are more about aesthetics then usability.

Answer 1

I'm going to channel my inner Jakob Nielsen and say do not abuse your users' trust. Do not force them to download images (in this case video) that they didn't ask for. The average user is still on a 28.8 modem or at best 56.6 (um make that 3G or at best 4G LTE) and this will only interfere with your users access to your content. If the user wants it he can download it.

If you think it's really important load it asynchronously. I'm sometimes in places (waiting for a train ) where I barely get 3G service and I certainly don't want to be downloading background videos.

Answer 2

If the content of the video isn't critical to your users and mainly used for "ambience", I would replace it with an image. Giving them the option play a video just seems like it'll add an unnecessary choice of things to do for users.

An animated image is really just the same data usage as the video or otherwise less data but poorer quality since they must download each frame in the animation.

Answer 3

I've been experimenting with this issue myself lately and found no image to be the best video replacement. Since we already have very few screen estate, background-images can get to distracting. I then put the images between parts of the webpage (it was an one pager) with some kind of parallex effect to still have some images on site.

When talking about video backgrounds, there is really one important thing: Build Mobile First and only add (LOAD) them to the design if necessary. As already mentioned by Mayo:

Do not force them to download images (in this case video) that they didn't ask for.

Answer 4

I suggest you can probably provide two options, so that users can switch depending on their situation where they are and based on their mobile internet access. Create a lite version of the landing page where video/images are not available, show just the required content. And other version as standard where in it replicates the same design provided on the desktop web.

Also you can write an intelligent algorithm to find out the device internet connection and can suggest the user the version they can use, this technique is being used by google. Hope this works out.

Answer 5

Typeform provides a useful real world example of how to handle this problem, which is broadly in line with your third point:

Load the video (paused) and give the user an option to play the video?

On a desktop device the video plays automatically. On an iPad or and Android phone (the only additional devices I've tested) a still of the video is shown with a large play button overlaid. The effect is to present the video as the primary interaction avilable on the page. They've cleverly used a very arresting image (at the time of writing it's a dog licking the screen) which I presume is creating enough interest to generate plenty of play button clicks. The video itself opens full screen (i.e. it is not running in the background).

I think giving users the option to play the video is a good approach but as other posters have mentioned your final decision should be based largely on the importance of the video to your users. Typeform's is pretty compelling and nicely captures what the product does. In other words, it's worth watching both for the user and for the business. Compare this to New Relic, whose background videos on desktop are definitely just for 'atmosphere'. On mobile they just display a blank background with a clear, actionable message. The video doesn't add enough to the user experience to justify its inclusion on mobile. From a content strategy perspective you could ask why you would generate content that only adds value on a limited number of channels but that's probably a bit off topic for a UX discussion.

Answer 6

Giving Play/Pause controls to background videos is not a good practice. I would suggest you to go with #2 which is load a still image and give the user an option to play the video. You have to keep in mind most of the users won't like to drain their mobile data on a video that they did not request.

Answer 7

If it's more about aesthetics than anything else, I'd stick to option 1:

• It won't consume precious mobile bandwidth without the user requesting it.
• It will be consistent with the desktop version, since the video is just background bling and does not provide any important information or viewing it is not required to complete a marketing funnel
• A .jpg or .png is significantly easier to optimize in size than an animated .gif

Answer 8

Using browseplays's cdn to run the video would solve your problems. They work on mobile and have the ability to auto play audio