1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Mobile video backgrounds and best practice

Discussion in 'HTML, Graphics & Programming' started by Russinating, Oct 24, 2018.

  1. Russinating


    Joined: Dec 27, 2005

    Posts: 14,965

    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?
  2. UberTiger


    Joined: Nov 1, 2008

    Posts: 3,156

    Not sure I would bother with video on mobile at all. If the user is on slow cellular it could end up being a horrible experience anyway.
  3. Mynight


    Joined: Jun 16, 2013

    Posts: 5,345

    Would it not be easier to check if it's a mobile/tablet and alter the tags?
  4. Dup


    Joined: Mar 10, 2006

    Posts: 9,794

    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.