Background video not autoplaying on iOS, replace with still image?

Design help General
1

I know there has been a lot of discussion about background videos not auto-playing on various iOS or browsers - usually when an iphone is in “low power” mode.

In my particular case, I’m using a CMS to feed a slider which displays a html embedded vimeo video link. Its works 95% of the time on most browsers i test it with.

But on the occasions either the device or the browser prevents the video from playing, rather than have the frozen first frame of the video, is there code or another a way to detect the video can’t play, and instead have the screen revert back to a still image or photo?

My site: www.gen.media

2

Should be possible.
I haven’t tried this recently but there are two approaches I’d test.

Approach #1 - attempt play, swap in image on fail;

  • create a separate image element which can be shown when the video is hidden
  • on page load, attempt a video.play(). If the promise fails, then hide the video element and show the image element

Approach #2 - show image, hide if video plays;

  • show the image by default, as an overlay
  • setup a “playing” event listener on the video element. If it fires, then autoplay worked and you can hide the image

You might also be able to use the video poster image for this. In my tests it generally disappears when autoplay is attempted, but in #1 above, I think you could force the poster to re-appear, something like;

video.pause();
video.currentTime = 0;
video.load();
3

Thank you Michael,

I obviously don’t want to take up too much of your time, but any chance you could point me in the right direction of what code I’d use for either of those options, and where to paste it?

Assume i’m the self-taught-designer-with-no-coding-experience catagory of webflow user ;)

4

Hi TC,

It would take some work to build and test properly and figure out which approach works best. The main challenge is testing across multiple devices and in low power mode.

I build these kinds of solutions for clients, so if you need some dev help you can DM me for details.

5

Thanks Michael,

Ill investigate your suggestions a bit further and then reach out when i hit a wall.