1---
2name: transparent-videos
3description: Rendering transparent videos in Remotion
4metadata:
5  tags: transparent, alpha, codec, vp9, prores, webm
6---
7 
8# Rendering Transparent Videos
9 
10Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.
11 
12## Transparent ProRes
13 
14Ideal for when importing into video editing software.
15 
16**CLI:**
17 
18```bash
19npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov
20```
21 
22**Default in Studio** (restart Studio after changing):
23 
24```ts
25// remotion.config.ts
26import { Config } from "@remotion/cli/config";
27 
28Config.setVideoImageFormat("png");
29Config.setPixelFormat("yuva444p10le");
30Config.setCodec("prores");
31Config.setProResProfile("4444");
32```
33 
34**Setting it as the default export settings for a composition** (using `calculateMetadata`):
35 
36```tsx
37import { CalculateMetadataFunction } from "remotion";
38 
39const calculateMetadata: CalculateMetadataFunction<Props> = async ({
40  props,
41}) => {
42  return {
43    defaultCodec: "prores",
44    defaultVideoImageFormat: "png",
45    defaultPixelFormat: "yuva444p10le",
46    defaultProResProfile: "4444",
47  };
48};
49 
50<Composition
51  id="my-video"
52  component={MyVideo}
53  durationInFrames={150}
54  fps={30}
55  width={1920}
56  height={1080}
57  calculateMetadata={calculateMetadata}
58/>;
59```
60 
61## Transparent WebM (VP9)
62 
63Ideal for when playing in a browser.
64 
65**CLI:**
66 
67```bash
68npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webm
69```
70 
71**Default in Studio** (restart Studio after changing):
72 
73```ts
74// remotion.config.ts
75import { Config } from "@remotion/cli/config";
76 
77Config.setVideoImageFormat("png");
78Config.setPixelFormat("yuva420p");
79Config.setCodec("vp9");
80```
81 
82**Setting it as the default export settings for a composition** (using `calculateMetadata`):
83 
84```tsx
85import { CalculateMetadataFunction } from "remotion";
86 
87const calculateMetadata: CalculateMetadataFunction<Props> = async ({
88  props,
89}) => {
90  return {
91    defaultCodec: "vp8",
92    defaultVideoImageFormat: "png",
93    defaultPixelFormat: "yuva420p",
94  };
95};
96 
97<Composition
98  id="my-video"
99  component={MyVideo}
100  durationInFrames={150}
101  fps={30}
102  width={1920}
103  height={1080}
104  calculateMetadata={calculateMetadata}
105/>;
106```
107