How to put a transparent video on a website

Can you show a transparent video on a web page?

Yes, with the video tag and a file that keeps transparency. VP9 WebM with alpha works in Chrome, Edge and Firefox; for Safari, you usually add an HEVC video with alpha.

An H.264 MP4 won't do: it would show an opaque background. Format details are in transparent WebM.

How do you prepare the files from Keyotte?

Keyotte gives you an MP4 on flat green, not a transparent file. You key out the green in your editor, then export a file with alpha, such as ProRes 4444, as the source for conversions.

Keep the clip short and the size matched to the display: a page background video doesn't need 1080p on mobile.

How do you write the video tag?

Put both sources in one video tag, the Safari version first, then the WebM. The browser plays the first one it can read.

For autoplay, browsers require a muted video: add muted, autoplay, loop and playsinline (the last one stops iPhones going full screen).

• Source 1: HEVC file with alpha, type video/mp4 with the hvc1 codec.
• Source 2: VP9 WebM file with alpha, type video/webm.
• Attributes: muted, autoplay, loop, playsinline.
• A still poster image for before playback.

How do you check that transparency works?

Test the page in Chrome, Firefox and Safari, on desktop and phone, over a colored page background. If one browser shows a black box, its source has no alpha or wasn't picked.

The usual causes of black are listed in transparent video turns black.

Are there alternatives to transparent video on a site?

If the effect only needs to be subtle, a regular video whose background matches the page color does the trick. Just place the subject on a flat color identical to the site's background in your edit.

That works as long as there's no pattern or gradient behind the video. It's often the lightest, most compatible choice. For a small animated element, animated WebP can be enough; see transparent GIFs and alternatives.