Transparent video, and why it is two files

The request that sounds simple

“Can we have the animated logo float over the photograph, with the background showing through?” This is a transparent video, and it is the single most annoying request in web motion, because the format support is poor and the workarounds all have costs.

The reason is historical. Video codecs were built for broadcast and cinema, where there is no background behind the frame. Alpha was bolted on afterwards, by different people, in incompatible ways.

What actually exists

VP9 with alpha, in WebM. The pixel format is yuva420p: the extra a is the alpha plane. Supported in Chrome, Firefox and Edge. Not in Safari. Encode with:

ffmpeg -i in.mov -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 0 -crf 32 out.webm

Your source has to carry alpha to begin with: ProRes 4444, QuickTime Animation, or a PNG sequence. Export from your editor with “RGB + Alpha” and a codec that supports it, or the alpha never existed.

HEVC with alpha, in MP4. Safari only, on macOS and iOS. Apple documents the requirement precisely: the video track must use the hvc1 tag rather than hev1, and the alpha is carried as an auxiliary layer. It is encodable from Apple’s own tools and from ffmpeg builds with videotoolbox, and it is not encodable everywhere.

So the working answer on the web today is two files and a source-order fallback: HEVC-alpha MP4 first for Safari, VP9-alpha WebM second for everyone else. Both have to be produced, both have to be tested, and if either is missing a large share of users see a black box.

Animated WebP and APNG both carry real 8-bit alpha and are supported everywhere. They are images, so they are far larger than video and cannot be paused, but for a short loop under a couple of seconds they are frequently the pragmatic answer.

The luma-matte trick

When the two-file route is unacceptable, the standard workaround is to put the colour and the transparency in the same ordinary video, side by side: the image on the left half of the frame, a black-and-white matte of its alpha on the right. One file, any codec, universal support.

At playback, a small WebGL shader (or a canvas loop, more slowly) reads both halves each frame and writes the matte’s luminance into the output’s alpha channel. Several open-source implementations exist; the technique is old and comes from broadcast, where a “fill and key” pair has always been two signals.

The costs are real and worth stating: the frame is twice as wide, so you are paying for more pixels; the matte is compressed lossily along with everything else, so soft edges pick up ringing; and you now require WebGL, which excludes anyone with it disabled and adds a code path to maintain.

The option people forget

Ask whether the background is arbitrary.

Very often the “transparent” video is going over one known colour, or one known photograph. If so, composite it in the edit, export an ordinary opaque MP4, and the whole problem disappears along with 60 per cent of the file size. The number of transparent-video requests that survive this question is smaller than you would expect, and asking it takes ten seconds.

If the content is vector (a logo, an illustrated character, a line animation) the right answer is almost always Lottie or SVG, which have transparency for free because they are drawings rather than rectangles of pixels. Transparent video is for filmed or rendered raster content specifically.

Checking that alpha survived

The failure mode is silent: your file plays, the background is black, and you cannot tell whether the alpha is missing or being ignored. Check the file rather than guessing.

ffprobe -v error -select_streams v:0 \
  -show_entries stream=pix_fmt,codec_name -of default=nw=1 out.webm

If pix_fmt is yuv420p rather than yuva420p, the alpha was discarded at encode: usually because the source did not have it, or because a filter in the chain dropped it. -vf format=yuva420p early in the chain fixes a surprising number of these.

The other common cause is premultiplied versus straight alpha, covered properly in the compositing module. If your edges have a dark or light fringe rather than being cleanly transparent, the alpha survived and is being interpreted with the wrong convention.

Performance notes

An alpha video is decoded with an extra plane, so it costs more memory and more decode time than the same clip opaque: roughly 30 to 50 per cent in practice. On a low-end phone, a full-screen alpha video at 60fps is not realistic, and the fallback should be a static image rather than a stuttering one.

Set poster on the video element so that something sensible is visible before the first frame decodes, and remember that a looping decorative video is continuous motion: it belongs behind the reduced-motion check.

The free path

ffmpeg encodes VP9 with alpha, converts sequences, builds side-by-side mattes with the hstack filter, and probes the result, all free. Blender renders with a transparent film and exports ProRes 4444 or a PNG sequence. DaVinci Resolve’s free edition exports alpha in several formats. Kdenlive and Shotcut both handle alpha sources. The gap in the free toolchain is HEVC-with-alpha encoding, which in practice requires an Apple machine.

The limitation

There is no single file today that carries video with alpha and plays everywhere. Every route above is a compromise: two files and double the testing, an image format and a size penalty, or a shader and a dependency. Anybody who tells you otherwise has tested on one browser.

This will probably improve (AVIF sequences carry alpha and support is growing) but treat any claim of universal support as something to verify on a real Safari and a real Android device before it goes in a plan.