Put a transparent video on your website
Removing the background is the easy half. This page covers the part that breaks in production: which format to ship, what the markup is, and how alpha video fails on the browsers you did not test.
Source: a green-screen keying sample
Synthetic sample · MP4 · 4 seconds · static subject
The sample exports alpha WebM. Switch the export format to compare the same clip as a Lottie ZIP or a transparent GIF before you commit to one.
Try this sampleThe problem
A transparent video looks finished on your machine and then arrives on a visitor's browser as a black box, a white box, or nothing at all. Alpha video is one of the last places on the web where the format decides whether your page works, and the failure is silent.
The advice you find is usually a format name with no conditions attached. Alpha WebM plays in Chromium browsers and Firefox but not in every Safari version; a transparent GIF works everywhere and looks it, with hard edges and a limited palette; a Lottie package scales beautifully but needs a player and, for keyed footage, still carries raster frames.
Underneath that is a decision nobody makes explicitly: whether this asset should be a video at all. A short loop is often smaller and sharper as a Lottie or a PNG sequence driven by CSS than as any video codec.
The browser workflow
Export the same clip in more than one format here and compare the real files, rather than choosing from a table. The converter keys locally and lets you switch the output format without re-keying.
Alpha WebM is the default for a web page when your audience is on Chromium or Firefox. Always give it a fallback: a poster image, or a second source, so a browser without alpha support does not render a black rectangle.
For a small looping element, try the Lottie ZIP and the PNG sequence before settling on video. The web-integration guide covers unpacking a Lottie ZIP and pointing the player at its image assets, which is the step most people get wrong.
Complete the task
Key the clip
Drop the video in, pick the background colour, and tune the matte until the edge holds up over the colour your page actually uses.
Export alpha WebM first
It is the best-supported real alpha video on the web. Note that recording this format needs a supported browser: it is unavailable in Firefox here, though Firefox plays the result.
Add the markup with a fallback
Use a muted, looping, inline video element with a poster image. The poster is what a browser without alpha support shows instead of a black box, so choose a frame that stands on its own.
Test on a real background
Place it over the actual page background, not a checkerboard, and check it on a phone. Halos and dark fringes appear over dark backgrounds and disappear over light ones.
Compare against the alternatives
Export the same clip as a Lottie ZIP and a PNG sequence and compare file size and sharpness. For short loops one of them usually wins.
Common use cases
Hero and section accents
Float a keyed subject over a gradient or photograph without the rectangular edge that gives a video away.
Empty states and onboarding
Ship a small looping character that sits on whatever background the surrounding component uses, including dark mode.
Email-safe and doc-safe fallbacks
When the target cannot play video at all, export the same clip as a transparent GIF and accept the hard edges knowingly.
Frequently asked questions
Does transparent WebM work in Safari?
Not dependably. Alpha WebM plays in Chromium browsers and Firefox; Safari support has varied by version and platform, so treat it as unsupported unless you have tested the exact versions your visitors use. Always ship a poster or a fallback.
Why does my transparent video show a black background?
Almost always because the browser decoded the video but ignored or could not read the alpha channel, so the transparent pixels render as black. That is the signal to fall back to a poster image, a Lottie package, or a transparent GIF for that browser.
What markup should I use?
A video element that is muted, looping, autoplaying, and playsinline, with a poster attribute. Muted and playsinline are what let mobile browsers autoplay at all, and the poster is your fallback when alpha is unsupported.
Is a transparent GIF good enough?
It depends on the edge. GIF transparency is binary — a pixel is fully opaque or fully clear — so soft edges become jagged and semi-transparent shadows are impossible. For a hard-edged logo or icon it is fine; for a keyed person or a soft glow it will look cheap.
Should I use Lottie instead of video?
For a short loop, often yes. Be clear about which Lottie you have though: a Lottie exported from keyed video contains raster image frames, so it scales like an image sequence and is not guaranteed to be smaller than the video. A Lottie authored as vectors is a different and better asset.
How do I load an exported Lottie ZIP on my site?
The ZIP holds the JSON plus its image assets, and the player needs both with the paths intact. The web-integration guide walks through unpacking it and pointing lottie-web at the assets folder.
Ready to try it?
Free to use, no signup. Files are processed locally by default.