Need Help Exporting Transparent Background Video from After Effects

[safetowear_9992]

Hi everyone,

I’m facing an issue while trying to export a video with a transparent background from After Effects. I’ve tried multiple solutions but nothing seems to work. My goal is to create a video with a transparent background that I can then embed onto a website.

Here’s what I’ve attempted so far:

• Exporting as QuickTime with the “RGB+Alpha” channel.
• Using various formats like PNG sequence, WebM, and others.
• Toggling “Render with Alpha” settings in the export panel.

No matter what I try, the background keeps showing up solid rather than transparent. If anyone has experience with exporting transparent background videos specifically for web use, I’d really appreciate any advice or step-by-step guidance!

[Airweb_AE]

Try converting your MOV file to WebM using this ffmpeg command:

ffmpeg -i [output_file_path].webm -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 [input_file_path].mov

 but make sure that your MOV file has an alpha channel.

Open it in After Effects to check

Or try to remove the background using this method:

Transparent Video Demo 

[safetowear_9992]

I’m sorry, but where do I put this code, and in which software?

[thepixelsmith]

One thing to keep in mind is that different browsers support transparent video in different ways/formats.

webM video works in Chromium browsers and Firefox, while MOV works in Safari, and some browsers may not support it at all.

[jefubbudu]

Most likely, you are exporting correctly, but the player being used or the webpage element is not coded in a way which supports transparency. I've come across this a lot on sites like Wix and Weebly. If all else fails, .GIF files are fery well supported and support transparency, though they are quite heavy and low quality.

[Warren Heaton]

Export from After Effects using one of the following Output Module templates:

• High Quality with Alpha (recommended)
• Lossless with Alpha

Convert that to WebM with transparency in an application that supports it.

[Rick Gerard]

Standard Media Players do not support alpha channels. Open your High Quality or RGB + Alpha rendered file in After Effects and drop it on the top layer of a comp, and you will see the transparency. 

If you need transparency for a video on a web page, you will need to use a third-party solution to render the movie and play it on the page. WEBM and FFMPEG are two such solutions. However, you can still get fouled up if you do not embed the right player on the web page. To be safe, they must be compatible with all browsers.