Chapter 218: <Video>

Core Idea

<Video> from @remotion/media is the recommended component for embedding videos in Remotion.

Key Concepts

• Example
• Props
• src
• effects?<AvailableFrom v="4.0.464" />
• cropLeft?<AvailableFrom v="4.0.500" />
• cropRight?<AvailableFrom v="4.0.500" />
• cropTop?<AvailableFrom v="4.0.500" />
• cropBottom?<AvailableFrom v="4.0.500" />

Code Examples

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for <Video> from the official docs.

Key Takeaways

1. Understand example when working with <Video>.
2. Understand props when working with <Video>.
3. Understand src when working with <Video>.
4. Understand effects?<availablefrom v="4.0.464" /> when working with <Video>.
5. Understand cropleft?<availablefrom v="4.0.500" /> when working with <Video>.

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.