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 to
autoplayunless the video is
playsinline: disable playing the video in “fullscreen”.
disableRemotePlayback: disable Google Cast or AirPlay buttons.
x-webkit-airplay="deny": same as
disableRemotePlayback, but respected by Safari.
disablePictureInPicture: disable any Picture-in-Picture prompts.
<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:
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
- 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