Participant

Question

tryng to make transparant background for quicktime .mov video in after effects for Webflow

Forum|Forum|2 years ago
May 28, 2023
5 replies
3135 views

Iv created a .mov quick time rgb alpha file in after effects that is supposed to have a transparent background in webflow however when I loads the file in Background Video the background displayed is black with the red square in the center. Is it possible to make a transparent background in webflow using quicktime .mov file in Background Video.

N

Narra36573757o70k

Participant

rendering .lottie files or .json (lottie formate) can help

L

leo240861267932

Inspiring

hello there i have the same problem

but isn t there an alternative for quicktime format ?

i want video h264 format with transparent background in order to place in indesign........

what s suposed to do ?

indesign does not acept quicktime

anybody ?

Warren Heaton

Community Expert

@leo240861267932

What's tricky about InDesign and video is that while InDesign supports MOV, MP4, and AVI file formats, it has limted support for the compression type.

An H264 MOV or an H264 MP4 can be placed and work as expected, but - unfortunately, H264 does not support an alpha channel being stored with the red, green, and blue channels.

G

gracet68502989

Known Participant

I am also having this issue; my aim is to overlay some animated handwritten text onto another video (for use on instagram & tiktok) and have played around with all variations of the recommended settings (Quicktime/RGB + Alpha/Apple ProRes 4444) but still only have a black background when viewing in Quicktime, or when trying to overlay on top of a previous video.

Any help would be much appreciated 🙏

Thank you so much

R

Rick Gerard

Community Expert

Media players do not support transparency. To check the file for transparency, import it into After Effects or Premiere Pro, look at the Info, or drop it in a composition. Social Media platforms, including YouTube and Vimeo, do not support transparency either. I don't know a single general-purpose web-based media player that does. If you check the thread carefully, you will see a similar explanation by somebody that has already replied.

R

Rick Gerard

Community Expert

Videos with transparency will display a black background in all standard media players and on web pages because the standard media players only support Red, Green, and Blue. This applies to Quicktime, Windows Media, YouTube, and just about every other media player. You need to open the rendered video in After Effects, Premiere Pro, or another video editing app that supports transparency to see if the file has an alpha channel.

I

IndustryDesignsAuthor

Participant

Are there any media players at all that play with a transparant backgrouind with Webflow and what about exporting it as a gif animation would that have a transpaarnt background on a web page and if posssible how so.

Warren Heaton

Community Expert

As far a embedding video on a web page with transparency goes, I believe that there is no player that supports this and no method of embedding it such that the transparency shows.

An animated GIF with transparency works, however, it will have the background color along the edges as the transprancy in a GIF does not anti-alias.

You can open a QuickTime rendered with Alpha in Photoshop and then use File > Export > Export for Web (Legacy) to Save an animated GIF. There's a limit of something like 500 frames (I forget the exact number) and I would reduce the frame rate on the After Effects side. For example, if the Comp is 29.97 frames per second, render the movie with alpha at 10, 6, or 5 frames per second - helping to keep the animated GIF an efficient file size.

If creating animated GIFs from After Effects on a regular basis, I highly recommend the GifGun for After Effects.

Warren Heaton

Community Expert

There are two Render Settings templates that include the Composition alpha: Lossless with Alpha and High Quality with Alpha.

Use one of those.

If you are setting the Render Settings manually, you must pick a compression type that supports RGB + Alpha like Animation or ProRes 4444.

I

IndustryDesignsAuthor

Participant

iv tried that it doesnt work heres a video that explain what im doing

https://www.youtube.com/watch?v=3xe_O7Aa-l8

Warren Heaton

Community Expert

You need to go into the Format Options and set "Animation" to "Millions of Colors+" to do it the way you're approaching it.

"Lossless with Alpha" should set this correctly for you.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded