Highlighted

Creating an MP4 file with a transparent background for a website

Community Beginner ,
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

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

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.

TOPICS
How to

Views

37.6K

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

Creating an MP4 file with a transparent background for a website

Community Beginner ,
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

Adobe Community Professional
Correct answer by Rick Gerard | Adobe Community Professional

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.

TOPICS
How to

Views

37.6K

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
Dec 30, 2017 1
Most Valuable Participant ,
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
Reply
Loading...
Dec 30, 2017 0
Community Beginner ,
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
Reply
Loading...
Dec 30, 2017 0
Adobe Community Professional ,
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
Reply
Loading...
Dec 30, 2017 0
Community Beginner ,
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
Reply
Loading...
Dec 30, 2017 0
Adobe Community Professional ,
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

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
Reply
Loading...
Dec 30, 2017 0
Community Beginner ,
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
Reply
Loading...
Dec 30, 2017 0
Adobe Community Professional ,
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
Reply
Loading...
Dec 30, 2017 2
New Here ,
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
Reply
Loading...
Dec 25, 2018 1
Adobe Community Professional ,
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
Reply
Loading...
Dec 25, 2018 5
Community Beginner ,
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
Reply
Loading...
Apr 28, 2020 1
Community Beginner ,
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
Reply
Loading...
Sep 07, 2020 0
heyviet LATEST
New Here ,
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
Reply
Loading...
Oct 15, 2020 0