Media Frame
Safe framed image or video scene.
SceneScenesAdvanced
media-frame30fps · 960×540
Install
$ npx remotion-ui@latest add media-frameFrame screenshots, images, or videos inside a safe video layout.
Advanced. Installs @remotion/media for video sources.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/media-frame- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: src, fit, caption, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { MediaFrame } from "@/remotion/scenes/media-frame";
<MediaFrame src={staticFile("demo.png")} title="Product demo" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | - | Image or video source. |
| fit | "cover" | "contain" | "contain" | Media object-fit behavior. Use contain for UI screenshots. |
| caption | string | - | Optional supporting caption. |