Video with a transparent background
A video that sits on your page with no box around it — logo stings, mascots, floating product shots, animated overlays. On the web that means WebM carrying an alpha channel, and you can make one here without installing anything.
Export a transparent WebMWhich formats can actually hold transparency
| Format | Transparency | Notes |
|---|---|---|
| WebM (VP9) | Full 8-bit alpha | The best option for the web: smaller files than VP8 at the same quality, plays in every current browser. |
| WebM (VP8) | Full 8-bit alpha | Larger, but understood by older browsers and by editors that choke on VP9. |
| MP4 (H.264) | None | The format everyone reaches for cannot store transparency at all. This is the single most common reason a "transparent" export arrives with a black background. |
| MOV (ProRes 4444) | Full alpha | Excellent for editing, useless for the web — browsers do not play it and the files are enormous. |
| GIF | 1-bit on/off | A pixel is either fully visible or fully gone, so edges look ragged. Fine for stickers, poor for anything with soft edges. |
Putting it on a page
There is no special markup — the transparency simply works, provided nothing paints a background behind the video element:
<video src="logo.webm" autoplay loop muted playsinline></video>Make sure nothing in your own stylesheet fills the element in — a global rule or a theme reset is the usual culprit:
video { background: transparent; }
Two things trip people up. Autoplay needs the muted attribute or
the browser will refuse to start it, and playsinline stops iOS opening the clip
fullscreen. And a video with alpha is heavier than the same clip without: the encoder stores an
extra plane, so budget for a larger file or a smaller frame.
Keeping the file small
Alpha video is usually decoration, so it rarely needs to be full-frame. Scale down to the size it will actually be displayed at — a 1920px-wide export shown in a 400px slot is wasting four fifths of its bytes. Then raise the CRF value until you can see the difference and come back a step. Trim to just the frames you need with the in and out points; a two-second loop beats a ten-second clip nobody watches to the end.
VP9 needs Chrome or Edge to encode. The VP9 preset uses your browser's own hardware encoder through WebCodecs, which makes it both the fastest and the highest quality option — but it only appears when the browser can actually do it. Elsewhere, VP8 produces the same alpha channel with a larger file.
From green screen to transparent WebM
If your source is green screen footage rather than an animation exported with alpha, key it first — see removing a green screen for how to get clean edges — then export WebM VP9. If the clip is headed for an editing timeline instead of a browser, ProRes 4444 is the better target.
Open the app