How to replace GIF with HTML video in 2021

You want to add a video to your webpage that acts like an animated GIF. All other online guides are out-of-date in 2021! Here’s the attribute soup you need nowadays:

<video autoplay loop muted playsinline disableRemotePlayback x-webkit-airplay="deny" disablePictureInPicture>
  <source src="/assets/yourVideo.webm" type="video/webm" />
  <!-- ... more sources ... -->

Here’s what the attributes do to mimic an animated GIF:

Annoyingly, <video> features are generally opt-out, so as browsers keep inventing new features, we have to add more attributes to opt out of them. I’ll try to keep this page up-to-date!

(Also, I note in passing how this attribute soup uses every possible naming convention: camelCase, alllowercase, and kebab-case. You just know each of them was decided on in 5 minutes by a developer at Google or Apple, with no discussion.)

More by Jim

Tagged #programming, #web. All content copyright James Fisher 2021. This post is not associated with my employer. Found an error? Edit this page.