Mobile video backgrounds and best practice

Soldato
Joined
27 Dec 2005
Posts
17,281
Location
Bristol
Does anyone have any links to resources on best practice for displaying/not displaying video backgrounds on mobiles?

My old approach was just to disable them on mobile and show an image instead, but a couple of newer phones (Note 9 and S8 for two) do play them. However iPhones - or at least the ones I have access to - don't. They therefore fallback to the poster, which I usually opt to have as the first still of the video as a preload.

However that still is often irrelevant to the content, or certainly not as good as another chosen image. BUT if I do that then those devices that can play the video have a horrible UX where you see an image for 1-5 seconds (or however long the video takes to load) before jumping to the video.


The <video> is in a wrapper that also has a backup image, but devices that can't load the video still show the element's poster, rather than the image behind.

Is there a way to check if a video element is able to be played, and only then disable it?

Any other tips?
 

Dup

Dup

Soldato
Joined
10 Mar 2006
Posts
11,225
Location
East Lancs
I wouldn't be displaying then on mobile at all unless they're crucial to the content and inwoukd give the user the option to play them. We certainly don't, we have many many many users and on mobile we're finding less is certainly more when it comes to conversion. The speed and UX of a page trump's fancy features.

Also, as you have found out, compatibility is also a bit of a mare needing multiple versions stored and served. There's likely plenty of resources out there but it keeps changing over time. I wouldn't see YouTube or not bother however not sure how robust you could embed one as a background video.
 
Back
Top Bottom