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:
autoplay
: start playing the video ASAP, just like an animated GIF plays as it loads.loop
: restart the video when reaching the end. Optional in GIF but usually on.muted
: important even if your video has no audio! Browsers will often refuse toautoplay
unless the video ismuted
.playsinline
: disable playing the video in “fullscreen”.disableRemotePlayback
: disable Google Cast or AirPlay buttons.x-webkit-airplay="deny"
: same asdisableRemotePlayback
, but respected by Safari.disablePictureInPicture
: disable any Picture-in-Picture prompts.
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.)
With Vidrio
With generic competitor
More by Jim
- Your syntax highlighter is wrong
- Granddad died today
- The Three Ts of Time, Thought and Typing: measuring cost on the web
- I hate telephones
- The sorry state of OpenSSL usability
- The dots do matter: how to scam a Gmail user
- My parents are Flat-Earthers
- How Hacker News stays interesting
- Project C-43: the lost origins of asymmetric crypto
- The hacker hype cycle
- The inception bar: a new phishing method
- Time is running out to catch COVID-19
- A probabilistic pub quiz for nerds
- Smear phishing: a new Android vulnerability
Tagged #programming, #web. All content copyright James Fisher 2021. This post is not associated with my employer. Found an error? Edit this page.