How to Create a Transparent WebM Video
Last updated: · Written by the RenderAlpha team
Facts checked against the sources below on November 9, 2026. Commands and file sizes measured on FFmpeg 9.0.2; playback tested in Chrome 152, Firefox 153 and Safari 18.6 on macOS 15.6.1.
A transparent WebM is a video with an alpha channel, so the background is truly empty. It is the lightest way to put a moving cutout on a web page. This guide shows how to make one, what it costs in file size, and where it plays, using tests we ran on one clip.
Short answer
A transparent WebM is VP9 video with an alpha channel. Make one from a source that has alpha with ffmpeg (-c:v libvpx-vp9 -pix_fmt yuva420p), or remove the background online. In our test it played transparently in Chrome 152 and Firefox 153, not in Safari 18.6, and a 5 second 720p clip came to 1.0 MB at CRF 30.
What a transparent WebM is, and where it plays
WebM is a container. MDN says VP8 and VP9 can carry an alpha channel if the browser supports it, and that Safari does not; WebKit’s bug tracker has an open report for VP9 with transparency (bug 275908, status NEW when we checked). On November 9, 2026, on macOS 15.6.1, we loaded the same 5 second VP9 WebM with alpha in three browsers and read back a pixel from the transparent area.
| Browser | Transparent? | What we saw |
|---|---|---|
| Chrome 152 | Yes | Alpha 0 in the transparent area |
| Firefox 153 | Yes | Alpha 0 in the transparent area |
| Safari 18.6 | No | Alpha 255, showing the colors stored under the transparent pixels |
Make one with ffmpeg
The source must already have an alpha channel, such as a ProRes 4444 file. The two flags that matter are -c:v libvpx-vp9 and -pix_fmt yuva420p, where the a in yuva is the alpha plane. We ran this on FFmpeg 9.0.2 with a ProRes 4444 source.
If you leave out -pix_fmt yuva420p, ffmpeg 9.0.2 refused our ProRes 4444 source with the message: Pixel format yuva444p12le is not widely supported. Use -strict experimental to use it anyway, or use yuva420p pixel format instead. Nothing was written. Some guides add -auto-alt-ref 0; on this version the output kept its alpha with or without it, and we left it in so the command also works the way those guides describe.
ffmpeg -i input.mov -c:v libvpx-vp9 -pix_fmt yuva420p -auto-alt-ref 0 -b:v 0 -crf 30 output.webmFile size by quality
CRF sets the quality target: lower is better quality and a larger file. For the same 5 second 1280×720 clip we measured these sizes. We did not compare the images by eye, so check the result on your own footage before choosing a value. For reference, the WebM that our own export produced for this clip was 3.1 MB, so sizes vary with the settings and the tool.
| CRF | File size |
|---|---|
| 20 | 2.11 MB |
| 30 | 1.03 MB |
| 40 | 0.42 MB |
Check that the alpha is there
A VP9 WebM with alpha stores the alpha plane separately, so the first command reports a normal pixel format with an alpha_mode tag, and the second decodes with libvpx to show yuva420p. Without -c:v libvpx-vp9, ffmpeg’s native VP9 decoder reported yuv420p for the same file, so alpha was ignored.
ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt:stream_tags=alpha_mode -of default=nw=1 output.webm
ffmpeg -hide_banner -c:v libvpx-vp9 -i output.webm -frames:v 1 -f null -Or remove the background online
If your clip is ordinary footage with a real background, an alpha source does not exist yet. Upload it to RenderAlpha, check the cutout on one frame for free, and download a transparent WebM. Each run takes up to 60 seconds of video at 1 credit per second, with no watermark. See how to export a video with an alpha channel for the other export routes.
Put it on a page
Use a normal video element with autoplay, muted, loop and playsinline. Because Safari does not render VP9 alpha, add an HEVC-with-alpha file for Safari; the markup we tested is in why transparent WebM turns grey or black in Safari. For OBS, see using transparent video in OBS.
Frequently asked questions
Do I need a green screen to make a transparent WebM?
No. A green screen is one way to get alpha. RenderAlpha removes the background from ordinary footage with AI, then exports the WebM.
Can I convert an MP4 to a transparent WebM?
Only if the MP4 already has a transparent source to rebuild from, and an H.264 MP4 does not. Our test MP4 reports pix_fmt=yuv420p with no alpha plane. Remove the background first, or see converting MOV to transparent WebM.
Which browsers play a transparent WebM?
In our test on macOS 15.6.1, Chrome 152 and Firefox 153 rendered the alpha channel and Safari 18.6 did not. MDN also states that Safari does not support alpha in VP9. We did not test Edge, Windows or mobile browsers.
Which CRF should I use?
Lower CRF means higher quality and a bigger file. On our 5 second clip, CRF 20, 30 and 40 gave 2.11 MB, 1.03 MB and 0.42 MB. Try a few values on your own footage.
Does a transparent WebM work in OBS?
OBS lists .webm among Media Source file types and does not describe alpha behavior; we did not test OBS. See transparent video in OBS for how to check.
Sources
Primary sources we checked. The date is when we last opened each page.
- MDN: Web video codec guide: VP8 and VP9 alpha, Safari (Retrieved )
- WebKit bug 275908: VP9 with transparency plays back incorrectly: Safari behavior, status NEW (Retrieved )
- OBS Studio: Media Sources: supported file types (Retrieved )