How do I make one transparent video work in both Safari and Chrome?
No single file works in both. Chrome, Firefox, and Edge composite VP9 WebM with alpha. Safari plays WebM but shows a grey background instead of transparency (WebKit bug 275908), and needs HEVC with alpha instead. Ship two sources in one video element: HEVC-with-alpha first for Safari, WebM second for everything else. A third option is a stacked-alpha file drawn with JavaScript, which avoids the codec split but needs a player. ExportAlpha does not export HEVC-with-alpha.
Updated
ExportAlpha writes the WebM, not the HEVC file
Transparent WebM up to 60 seconds, or ProRes 4444 up to 8 seconds. Encode HEVC-with-alpha somewhere else if Safari must composite the video.
5 free credits on first sign-in for most new accounts. Trial stills capped at 5. No card required. Fair-use limits apply.
What was tested on October 9, 2026
A VP9 WebM with alpha (a red rectangle, transparent everywhere else, encoded as yuva420p) was played over a magenta page (#ff00ff).
- Chromium 140 showed the magenta page in the transparent area and the red rectangle in the middle. Alpha compositing worked in that browser.
- Playwright WebKit 26.0 on Linux crashed as soon as a video source was set, including a normal MP4 with no alpha. It did not show grey, black, or the page color. That build is not macOS Safari.
- WebKit bug 275908 was still status NEW. The report says VP9 with transparency plays with a grey background rather than transparent. This page follows that report for Safari, and it does not treat the Linux crash as a color measurement.
Ways to deliver both browsers
| Route | Produces | Where it runs | Needs an alpha source? | Notes |
|---|---|---|---|---|
| A macOS converter app | Often WebM and HEVC with alpha | A Mac app, which may be a download rather than a website | Usually yes | Read that vendor's page for what it actually installs. ExportAlpha is not this route. |
| Browser-based WebM encoders | WebM | In the browser | Often yes | Confirm the file. Do not assume the page also writes HEVC-with-alpha. |
| FFmpeg | VP9 WebM with alpha | Local | Yes, unless you key a flat color first | HEVC-with-alpha encoding was not part of the tests on this page. |
| Apple's tools on macOS | HEVC with alpha | Local, on a Mac | Yes | Apple WWDC 2019 session 506. This site has not play-tested an HEVC-with-alpha file. |
| A JavaScript stacked-alpha player | A packed file plus a custom player | Browser | Yes | Needs JavaScript. A normal video tag does not draw it. |
| ExportAlpha | WebM VP9 alpha (up to 60s) and a ProRes 4444 master (up to 8s) | Web app | No. It removes the background first. | Does not export HEVC-with-alpha. |
Limits change; check each tool's page.
One video element, two files
<video autoplay muted loop playsinline>
<source src="alpha.mov" type='video/mp4; codecs="hvc1"' />
<source src="alpha.webm" type="video/webm" />
</video>The first source is the HEVC-with-alpha file. The second is the WebM. ExportAlpha can make the WebM. It cannot make the HEVC source. Muted is there so autoplay is allowed. Why the WebM looks grey in Safari, rather than how to tag the element, is covered in Why is my transparent WebM black in Safari?.
If you need to ask the browser what it can decode, use the Media Capabilities API instead of a user-agent string. A browser can report that it plays a codec and still fail to composite alpha.
ProRes is the editor master, not the Safari file
ProRes 4444 keeps alpha for Premiere, Resolve, Final Cut, and After Effects. Safari does not use that MOV as the transparent web source. ExportAlpha limits ProRes export to 8 seconds. The format matrix is which video formats support transparency.
Frequently Asked Questions
Does Safari support WebM?
Safari can play VP9 WebM. It does not composite the alpha channel. WebKit bug 275908, still status NEW when checked on October 9, 2026, says playback uses a grey background rather than transparent. Do not describe that as Safari having no WebM support.
Does Chrome support HEVC with alpha?
Not verified. This site has not confirmed whether Chrome composites HEVC with alpha. The transparent playback tested here is VP9 WebM in Chromium, where a colored page background showed through the transparent pixels.
What is a stacked-alpha video?
A delivery method that stores color and alpha in one file and draws them with JavaScript, such as WebGL or canvas, instead of asking the browser to composite video alpha. It avoids the codec split and it needs a player script. A plain video element is not enough.
Does iOS Chrome behave like Safari?
Chrome, Firefox, and other third-party browsers on iOS use WebKit, so they share Safari's engine. iOS WebM alpha is not verified. This page does not claim those browsers composite WebM alpha on iOS. For Safari transparency, use HEVC-with-alpha from an encoder that writes it. ExportAlpha does not.
Which file should I list first in the video tag?
List the HEVC-with-alpha source first and the WebM source second. A browser that can use the HEVC file can select it. A browser that cannot can fall through to WebM. ExportAlpha produces the WebM file and, for clips of 8 seconds or less, a ProRes 4444 MOV. It does not produce the HEVC-with-alpha file.
Sources
- WebKit bug 275908: "grey background rather than transparent", status NEW (retrieved October 9, 2026).
- Apple HEVC with alpha: WWDC 2019 session 506.
- Chromium 140 compositing test and the Linux WebKit crash, October 9, 2026, described above. Linux WebKit is not macOS Safari.
- Sources and method
Download the WebM here
Use it in Chrome, Firefox, and OBS. Add an HEVC-with-alpha source from another encoder when the page must be transparent in Safari.
5 free credits on first sign-in for most new accounts. Trial stills capped at 5. No card required. Fair-use limits apply.