Why transparent WebM becomes a black box

A WebM that looks transparent in Chrome can display incorrectly or fail in Safari because browser support is not one shared codec path. Chrome commonly uses VP9 WebM with alpha. Safari’s dependable transparent-video path uses HEVC with alpha in a QuickTime-compatible MOV container. Serving only the WebM asks Safari to decode a format combination it may not handle as expected.

The fix is not a CSS blend mode, a transparent background declaration, or a renamed extension. You need a second video encoded with an alpha channel Safari can understand. The converter above creates both browser outputs, verifies them, and includes the source markup.

Put the Safari source first

<video autoplay muted loop playsinline poster="poster.png">
  <source src="out.mov" type='video/mp4; codecs="hvc1"'>
  <source src="out.webm" type="video/webm">
</video>

Source order matters. Safari sees the HEVC alpha source first, while browsers that cannot use it move to WebM. The explicit hvc1 codec hint helps the browser choose correctly. Your host must return a compatible video MIME type and support byte-range requests. If every file downloads instead of playing, inspect the response headers before changing the animation.

Troubleshoot the source, server, and page separately

First open the MOV directly in Safari. Next open the WebM directly in Chrome. Then test the combined video element over a bright CSS background. This separates encoding failures from hosting and layout failures. Confirm that the files are not zero bytes, URLs return status 200, and a CDN has not cached an older opaque version under the same path.

If the video plays but autoplay does not, confirm that it is muted and uses playsinline. If the first frame flashes black, add the generated transparent PNG poster. If motion is decorative, provide a reduced-motion rule that keeps the poster visible instead of forcing playback.

Also remove CSS as a variable during diagnosis. Test the video in a bare page before placing it inside a transformed, masked, or blended component. Once alpha works in the minimal page, restore layout rules one at a time. This prevents a compositing or stacking problem from being mistaken for a codec failure and keeps the fix focused on the layer that is actually broken.

Verify alpha instead of trusting the filename

A file called “transparent.mov” can still be opaque. Verification needs to inspect the encoded output, not the project settings or extension. RevNex checks the WebM alpha signal and decoded transparency, and checks the Safari output’s codec tag and alpha-capable media metadata before marking a bundle complete.

For Webflow-specific placement, follow the transparent video in Webflow walkthrough. For source preparation, sizing, posters, accessibility, and deployment checks, use the definitive guide.