Chapter 232: Rendering transparent videos

Core Idea

Reference page for Rendering transparent videos in the Remotion documentation.

Key Concepts

• Creating a WebM video with Alpha channel
• Known problem: Rendering transparent WebM on Lambda
• Creating a ProRes video with Alpha channels
• Enabling transparency when using <OffthreadVideo>
• Transparency when using <Video>
• Creating a fallback version
• See also

Code Examples

const MyVideo: React.FC<{
  transparent: boolean;
}> = ({transparent}) => {
  return (
    <div style={{backgroundColor: transparent ? undefined : 'white', flex: 1}}>
      {/* Omit opaque background based on `transparent` prop */}
    </div>
  )
}
// - MyVideo

• What it demonstrates: Usage pattern for Rendering transparent videos from the official docs.

Key Takeaways

1. Understand creating a webm video with alpha channel when working with Rendering transparent videos.
2. Understand known problem: rendering transparent webm on lambda when working with Rendering transparent videos.
3. Understand creating a prores video with alpha channels when working with Rendering transparent videos.
4. Understand enabling transparency when using <offthreadvideo> when working with Rendering transparent videos.
5. Understand transparency when using <video> when working with Rendering transparent videos.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.