Creating an MP4 file with a transparent background for a website

Community Beginner ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

I would like to import a mp4 animated file which is the company logo and export it with a transparent background so it can be embed into a website page. I have gone through the steps imported into a new project, it currently has a black background so i go to the composition settings and click Lossless and then render with RGB + Alpha and set it as a PNG. It renders but it still has the background black.

Can anyone help please?

Thanks in advance

TOPICS
How to

Views

86.7K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Dec 30, 2017 Dec 30, 2017
An MP4 is entirely the wrong format for the web page. You should be creating this animation in another application and NOT embedding a movie in a web page as a logo. It is not an acceptable format for a web page, especially a logo. Also, media players are very picky about the size and aspect ratio of the video. If you crop the video to some aspect ratio like 20 to 1, then even if you get it rendered, the media player is going to put it in a 19X9 or 4X3 frame. You need to do some serious study on...

Likes

Translate

Translate
Adobe Community Professional ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

Well, you still need to apply masking or keying to create transparency. MP4s don't have any. None of this happens automatically. Perhaps you should watch some tutorials and study up on the subject.

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

Thanks.

I am very new to Adobe After Effects, can you recommend any tutorials or know someone who would provide detailed instructions to the problem. I am willing to pay.

Thanks

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

There is no video format that will play in a media player on a web page that supports transparency. You have to match the background color of the website. If you want an animation with transparency you need to produce an animated gif or use other means. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

Hi Rick,

the mp4 has already been created so if I was to use it I would need to change the background colour to pure black and then crop it. I have imported it but need some guidance. I have it embeded in the site but it takes up the whole screen and is the wrong by color. Not bothered about the transparency to be honest just don’t want it take the whole screen. Can advise best place to look for the anaswers.

cheers

sean

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

Can you share the screenshot of video you want to export as transparent background.

I am not sure how your video look alike but rotoscoping can be the solution to achieve the desired result  - How to Remove Background from Video Footage without Greenscreen -After Effects Tutorial - YouTube

Vishu Aggarwal
Adobe Certified Instructor, Professional and Expert

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

Screen Shot 2017-12-30 at 20.46.13.png

So i have managed to import the MP4 file and i now want to either change the background colour to black and then crop the size so it will fit in the middle of the web page and then i can use padding around the site page for the other information. I have 5 videos that are the same but a different colour and i would like to consolidate them. My preference is to import the video file and then export as a PNG with RGB + Alpha so it is on a transparent background and then place it on the black background on the website rather than export with a black background.

Excuse my lack of knowledge i am still learning.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 30, 2017 Dec 30, 2017

Copy link to clipboard

Copied

An MP4 is entirely the wrong format for the web page. You should be creating this animation in another application and NOT embedding a movie in a web page as a logo. It is not an acceptable format for a web page, especially a logo.

Also, media players are very picky about the size and aspect ratio of the video. If you crop the video to some aspect ratio like 20 to 1, then even if you get it rendered, the media player is going to put it in a 19X9 or 4X3 frame. You need to do some serious study on video formats, standards and designing for the web.

I would crop your comp to exactly the same size you want it in the web page layout, use a transparent background and render using the Lossless with Alpha preset and then open that file in Photoshop and set up an animated gif there making sure that you don't have any duplicate frames. You can individually set the duration of every frame so if you have 10 frames of animation and then you want the logo to sit still for 20 seconds you only need 11 frames, you just set the duration of the last frame to 20 seconds. Now you have a small file size animated gif that is compatible with all web browsers and mobile phones.

Better than that you would use HTML  5 and SVG (scalable vector graphic) format to create an animated SVG for your web page. There are lots of applications that can help you create an animated SVG and HTML 5 for your web page. That is the best option for your animated logo. Trying to use a video is a fools' errand and it is not going to work. If you are working for a client, they are going to be severely disappointed and your reputation will be damaged.

I hope this helps and I wish you luck.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 25, 2018 Dec 25, 2018

Copy link to clipboard

Copied

I am sorry Rick, it seems like you are from 1998.
Mp4 is in some web applications the only format that works at ALL! Welcome to 2018 (soon 19) > a gif for example uses less colours and takes more space.
MP4 Does not have a frame, can be used for animated loops perfectly for example LOGOS or thumbnails if you have a portfolio page. seanclarky > in case I find a solution, I will post it. I am just about to! How to Export Transparent Background Videos in Adobe After Effects CC Tutorial - YouTube
This is just one tutorial I found..  so people, why do you even answer anyone, if you don't have a solution to his problem.

STOP THINKING THAT IF YOU DONT SEE THE POINT THAT THERE IS NO POINT.

IF YOU SEE NO POINT JUST S... T:... F:.... U.... and let other people help! Seriously.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 25, 2018 Dec 25, 2018

Copy link to clipboard

Copied

matthiasn63276080  wrote

I am sorry Rick, it seems like you are from 1998.
Mp4 is in some web applications the only format that works at ALL! Welcome to 2018 (soon 19) > a gif for example uses less colours and takes more space.

MP4 is an 8-bit video format that does not support transparency. It only supports 3 channels. Read the specifications. Here's one white papeer for you: 20111116 Adobe Microsoft Fragmented MP4 fMP4 White Paper - SourceForgehttps://sourceforge.net/.../FR...

Media players can be programmed to loop, an MP4 file cannot. I've been studying digital formats for more than 20 years and have participated directly in the development of several of them. The tutorial you pointed to is by an amateur that is suggesting changing the output module to custom settings that are actually not optimized for rendering alpha channels and are no different than the existing Lossless with Alpha preset that exists. The tutorial has nothing at all to do with creating an MP4 with transparency because there is no such thing. The original question was how do you export an MP4 with transparency, the answer is - you choose another format and if you need MP4 for web compatibility you are using a format that will not work.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 28, 2020 Apr 28, 2020

Copy link to clipboard

Copied

I have created a transparent video spokesperson in After Effects. Then converted it to third party vp6 format using a plugin for adobe media encoder.

 

Here is the link - https://www.santanu.biz. Please wait for a while and click the home button if the video does not load.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 21, 2022 Apr 21, 2022

Copy link to clipboard

Copied

LATEST

It would be appreciated if you could advise the formats that actually work with web rather than simply saying MP4 wouldn't work. I am making the same mistake in 2022 and find no help reading anything you say so far. Sometimes clients make ignorant requests and we can only try to find a solution around it. So please, I hope you have learnt to be of better help 4 years later. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 07, 2020 Sep 07, 2020

Copy link to clipboard

Copied

Just ran across this becuase I converted an animated GIF to MP4 for use as a logo on a webpage and noted the background wasn't transparent. Just like to add that as of 2020, MP4 is accepted as a logo format over animated GIF. The file I started with was 1.8Mb, and the resulting MP4 was 32k. Followed instructions from here: https://web.dev/replace-gifs-with-videos/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

Wow, what a rude comment from Rick...especially as an Adobe professional. I know this is 3 years old, but how about you answer the guys question instead of insulting the customers. I'm posting an answer to this for people who may be searching in 2020.

 

There are a couple of methods to achieve the alpha channel effect desired. While an animated gif is preferable, it does not work in cases where you want to create interaction. I'm using Scroll Magic and Greensock to animate a video on scroll and it works beautifully.

 

1) .WEBM Format supports alpha channels and can be embedded as an acceptable web format. However, I believe this format is limited when viewed in mobile safari.

 

2) CSS Blend Modes via the mix-blend-mode property - This is probably the format you would want to use, but that all depends on your project. By using "screen or multiply" blend modes, you can key out the black and white backgrounds on the fly. I have used this method to morph logos as you scroll down a page.

 

3) Lottie - https://lottiefiles.com/ - Created by AirBnB, Lottie can provide awesome JSON based animations based on vector paths. Consider this method if you still have the vector paths available in After Effects.

 

Hope this helps! 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

Very useful reply, thanks!

Just some notes:

-I would avoid any video format if I needed transparent background.

-CSS Blend Modes will cause unexpected results if we are not working with black over white or white over black animations (using multiply / screen blending modes).

-Lottie is definitely a solid option. The only problem is there are some limitations in the way we need to create our After Effects project (limited support on Expressions and effects).

-Another solid option is to create the animation as an HTML5 Canvas in a tool such as Adobe Animate.

-And yet another option would be a SVG animation. There are some tools out there like Keyshape (https://www.keyshapeapp.com/)  that allow to create SVG animations from a visual UI with timeline and all. It can also be animated from a CSS file but depending on the animation this would be an overwhelming task.

 

Cheers.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 10, 2021 Jun 10, 2021

Copy link to clipboard

Copied

Where can I convert a .mov file to webm with tranparency? (yes im extrmemely amateur when it comes to video)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 09, 2022 Jan 09, 2022

Copy link to clipboard

Copied

I have been creating videos for my streaming so my info may help you in this regard.

I use a program called MMD (Miku Miku Dance) which allows you to take an Anime character you created (or someone elses) and animate them. Generally I use it to create dance routines but some have used it to create fighting moves and other animations. The issue with this program is that it only exports in AVI which is great for quality but the files are 10g+ in size generally. I have the space on my 10T hard drive but the program that will run them generally has issues handling file sizes too large because it requires loading first. If you ever streamed, loading a large file like this is not something you want people in real time to have to wait on.

So at first I used a program called Video Convert+ (Gold Edition) which is free on the Microsoft Store (Free is always good) and it can convert files to almost any format. Orignally I was creating MP4s with a green screen in the background until I realized that the same program allows me to create WEBM and other formats that already have transparency incorporated into it.

So hopefully this helps, the program is called Video Convert+ (Gold Edition) on the Microsoft Store. It is free, no ads, no subscriptions, no junk. Just get it and use it. It is simple to use, if the MOV file has transparency, it will keep it for WEBM. You just pick the file, pick the format, convert, wait for it to finish which it doesn't take long, the video will be in your video's folder.

Glenn

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines