7 Replies Latest reply on Dec 30, 2017 9:10 PM by Rick Gerard

    Creating an MP4 file with a transparent background for a website

    seanclarky Level 1

      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

        • 1. Re: Creating an MP4 file with a transparent background for a website
          Mylenium Most Valuable Participant

          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

          • 2. Re: Creating an MP4 file with a transparent background for a website
            seanclarky Level 1

            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

            • 3. Re: Creating an MP4 file with a transparent background for a website
              Rick Gerard Adobe Community Professional & MVP

              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. 

              • 4. Re: Creating an MP4 file with a transparent background for a website
                seanclarky Level 1

                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

                • 5. Re: Creating an MP4 file with a transparent background for a website
                  vishuagg19 Adobe Community Professional

                  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

                  • 6. Re: Creating an MP4 file with a transparent background for a website
                    seanclarky Level 1

                    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.

                    • 7. Re: Creating an MP4 file with a transparent background for a website
                      Rick Gerard Adobe Community Professional & MVP

                      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.