Transparent Video For the Web in 2023

We're showing how to create transparent videos from an image sequence of transparent PNGs for use in HTML.

Support for transparent video was added in Safari 11 (macOS High Sierra and iOS 11) in 2017 via the HEVC H.265 codec.

All other browsers support transparent VP9.

Use ffmpeg to create a .webm (VP9 codec)

Note: Install ffmpeg on Macs by running brew install ffmpeg (it installs everything you need). No idea what you have to do on Linux or Windows, but you're smart, you'll figure it out!

Easy peasy:

ffmpeg \
    -r 20 \
    -f image2 \
    -start_number 0 \
    -i ./images_%05d.png \
    -c:v libvpx-vp9 \
    -pix_fmt yuva420p \

This will cover most browsers, but not Safari.

For Safari, you need to...

Use Compressor to create a .mov (HEVC H.265 codec)

Note: There are other tools that will create HEVC H.265 for you, it's just that i use Compressor because it kinda works best for me. The drawback is that it costs 50 bucks.

  1. Add the image sequence: "File" → "Add Image Sequence..."

    Manually set the target frame rate and click "Add"

  2. Add a job

    1. Make sure you have the Start time set to 00:00:00:00.
    2. Set the frame rate to "Custom" and enter your target frame rate.
    3. Click "Add".

  3. Select a preset

    Pick "YouTube & Facebook" → "Up to 4K". Click "OK".

  4. General Settings

    Set "Format" to "Video". You probably don't want an audio track.

  5. Video Settings

    1. Set "Frame size" to "Automatic".
    2. Set "Frame rate" to "Automatic" and enter the target frame rate.
    3. Set "Codec" to "HEVC". You may set "Encode type" to "Slower". Or not, i don't know.
    4. Set "Avg. Data rate" to "Custom". You'll have to experiment with both the kbps value and with the Quality slider below. See which values give you minimum file size and maximum quality. The values in the following screenshot might or might not give you good results. Tweak them as needed. This is a bit of trial and error.
    5. Check the "Preserve alpha" option.
    6. When done, click "Start Batch" and the conversion will begin.

Embed the videos

<video width="1083" height="245" autoplay muted loop playsinline>
    <source src="" type="video/quicktime">
    <source src="video.webm" type="video/webm">

It is important that the is listed first. If video.webm was listed first, Safari would happily play that, because it does support the webm container format and the VP9 codec. However, Safari does currently not support transparent VP9. It would ignore the alpha channel, and we don't want that. If is listed first, Safari will play that instead in all its transparent glory. Only Safari supports the Quicktime container format, so all other browsers ignore it and load video.webm instead.

Admire the result

Genos Logo (c) SteelWave LLC, All Rights Reserved