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

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

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.