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 ... -->
</video>

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.)

Tagged #programming, #web.

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2021. Content is not associated with my employer. Found an error? Edit this page.