Tutorial: Video transparency for web (MOV to WEBM, HEVC)

This is a tutorial on how to use a video with an alpha channel, aka transparency, on the web.
Tools used:
Videezy
After Effects
Media Encoder
Shutter Encoder
MacOS Finder
Photoshop
ImageOptim

[@tetra6938]

BRO! THANK YOU! Was struggling for days to figure this out. You are the man!

[@JeffSielaff]

Thanks, Neil! I was completely stuck until I watched your video. Huge help!

[@Troconnell]

Wanted to send a MASSIVE thank you. This helped A LOT.

[@dochudza]

Dude. THANK YOU!! knowledge out of my scope!

[@simonricoo]

Super useful thanks for the tutorial Neil!

[@VirtualWRLDS2023]

Thank you brother I haven't tried this yet but this was everything I need.

[@Ak4tami]

Worked perfectly, thank you so much!

[@potatonewton]

Man this was so helpful. Thank you so much

[@Janin903]

thank you Neil!

[@Wotson]

You are lifesaver, ty!!!

[@arkadyzamatin2678]

thanks, you are a hero

[@vexan_twitch]

No way man you're brilliant!!!

[@anthonysetiadi]

Thanks so much. This was exactly what I was looking for. Good clutch on Shutter Encoder app.

[@Akshatgiri]

Thanks mate! Super helpful

[@_________________________.-]

you're a life saver!!!!

[@Abdulmenam7]

A HUGE THX TO YOU

[@ericjiang4124]

This works thanks.

[@jihadkayar5761]

i love u bro thx for the helping

[@MirkoMancini]

Thank you for this video

[@santireinoso8061]

man you save my life

[@Rodkidesings]

hey Neil! thanks for the video! One question, does the WebP support transparency? I haven't been able to create an image with transparency. I appreciate your help.

[@kevinsusanto153]

Hello Thank you for your great videos! In April, I succeeded to make my mov became transparent by using the HEVC conversion with turned on Preserved Transparency. However, when I tried today with the same source of mov and same source code, when I ran my html code in safari / chrome in my apple device, the black background exists. DO you know what cause this? 2 months ago I tried and it was a big success. Thank you. I hope you could reply my questions. Regards

[@AnthonyMixides]

Hi Neil great video. If the webm is large in size can it be put on Vimeo to stream?

[@webclub2000]

helpful, thank you

Thank you SIR.

[@markjaydaria17]

Thanks man!

[@joshd265]

Is there a format that will display an Alpha video on *all* browsers? I’m using a simple website builder (not coding) so not sure how I’d use the 2 different video formats/files for the one vid on my site?

[@coconuthair]

This is a great video. is it possible to edge instead of chrome looking at your chart

[@zoqin]

Thanks a lot

[@surbhidixit1181]

Great video I have done the same but there is black background after enabling alpha channnel in vp9

[@AlexMaggi-ct8ro]

Thanks, Neil. Just one problem: I don't have a Mac, so when I reach 04:15 in your video and try to convert the MOV file to one Sarari will render with a transparent background, I can't use Finder (or QuickTime, for that matter) to make the conversion. What is a PC user to do?

[@nicholaskelly7068]

any suggestions for making an hevc file from the mov on windows?

[@TJPrecious]

I'm also waiting for a reply

[@DAAN_MUSIC]

This is my no.1 issue as a webdev

[@mr.joneck]

I rarely leave any comments, but thank you very much!

[@tallneilio]

adding: it looks like you can also achieve transparency using an HEVC with the HVC1 codec enabled. developer.apple.com/av-foundation/HEVC-Video-with-Alpha-Interoperability-Profile.pdf example: www.cnet.com

[@nuclear5744]

Hey Neil, thanks for the video. I followed your steps, got a WEBM video, but the edges seem jagged and low quality- can't seem to find a solution on google, is there any feathering options available that I'm missing?

[@tallneilio]

@@nuclear5744 are you noticing jagged edges in any other exports? the solution might be better keying out the object, or feathering as you mentioned, done in after effects

[@1haker]

Thank you really much !! It works MP4 + HEVC hvc1 codec transparency works in Safari and this mp4 is super light compared to .mov

[@ringedingdong]

Thanks

[@KaterinaSolo03]

what's fallback and why did you create GIF and PNG, in which cases are they used?

[@tallneilio]

a fallback is for when you can't serve video, for instance on slow networks

[@geektactics4321]

Hey! The conversion is done, but the issue here, is that PS text is sentenced to the black rectangle on exit. Have you ever dealt with that kind of things?

[@tallneilio]

not sure what you mean by " PS text is sentenced to the black rectangle on exit"

[@geektactics4321]

@@tallneilio I mean, Adobe Photoshop's text-tool creates text, which, on WebM conversion, is being sentenced to black rectangle.

[@tallneilio]

@@geektactics4321 I haven't experienced that, but it may help to flatten the text / create outlines so that it's read as a vector shape, rather than live text.

[@ilyaiksent6209]

I just can't understand how to get "Encode Selected Video Files" available at Finder. I have no such point at context menu...

[@JonathanGalland]

Click your Apple logo at the top left corner of your screen, then System Preferences / Keyboard / Shortcuts / Services. And under "Files and Folders" make sure to check "Encode Selected Video Files". The option should show under "Services" when you right-click a file.

[@THEmp361]

Hi, I followed the video's instructions, and my .mov file is alpha. However, when I convert it to WebM with alpha enabled, the result has a black background. Your help is much apprecaited. Thanks Edit: I'm using Windows 11.

[@joshd265]

I’ve experienced this also. Did you figure out how to get rid of the black background?

[@fatrabbitvideo3112]

me to

[@isaihernandez4136]

Did any of you figured it out?

[@hollyboy7119]

Hello, i'm still new in AE but i have a questions... how to make transparant gif in webm format with low quality without white stroke? Thank you so much.. I hope you see my comment here..

[@tallneilio]

the white stroke may be coming from how you are keying (isolating the object from its background) in after effects. you may want to try a different method for keying. there are lots of different ways to do it

[@robbarlow147]

Hey man, when I convert to HEVC from .mov I’m getting an invalid configuration message and can’t seem to find away around it. Any ideas?

[@tallneilio]

@@robbarlow147 sorry I haven't encountered that so I'm not sure. this is the only documentation I can find: support.apple.com/en-us/HT208238

[@smylmvv]

Thanks! Unfortunately it doesn't works for me but thanks anyways for the tutorial!

[@jonos9467]

omg man...i was banging my head against the table because i could not get the video on safari mobile to run for the life of me...I had already reverted to using a huge lottie file and conditional visibility for mobile...mean while it was just 2 lines to let the browser figure it out by itself...fml

[@hater1142]

THANKS FOR THIS