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

[IndustryDesigns]

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.

[Warren Heaton]

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.

[IndustryDesigns]

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]

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.


After Effects "Lossless with Alpha" Render Settings Template

[IndustryDesigns]

Thanks though Iv tried all your suggestion and still the background is black when I export the file. Perhaps theres a setting some where else in the program that will fix it. Anny suggestions would be appreciated.

[Warren Heaton]

Please see Rick Gerards' comment.

[Rick Gerard]

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. 

[IndustryDesigns]

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]

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. 

[gracet68502989]

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

[Rick Gerard]

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.

[Warren Heaton]

You'll need to superimpose the animated handwritten text over the other video in Premiere Pro or After Effects and then export/render a merged version to post to social media.

Shorthand for this would be "export with graphics" or "render with graphics".




 

[leo240861267932]

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]

@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.