{"id":"82b93343-463e-423b-88ab-f30f494680ce","slug":"vercel-labs-videos","kind":"skill","name":"videos","summary":"Embedding videos in Remotion - trimming, volume, speed, looping, pitch","owner":"vercel-labs","repoUrl":"https://github.com/vercel-labs/json-render/blob/HEAD/skills/remotion-best-practices/rules/videos.md","license":"Apache-2.0","licenseTier":"permissive","trust":"official","stars":18658,"match":null,"fewStars":false,"format":"instructions","createdAt":null,"addedAt":"2026-10-14T11:00:26.730Z","logoUrl":"https://avatars.githubusercontent.com/u/108547162?v=4","linkOnly":false,"collection":{"name":"json-render","repo":"vercel-labs/json-render"},"skillPath":"skills/remotion-best-practices/rules/videos.md","categories":["memory-knowledge"],"tags":[],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T11:00:26.725Z","sample":false,"url":"https://conduits.dev/tools/vercel-labs-videos","language":"TypeScript","transports":[],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Using videos in Remotion\n\n## Prerequisites\n\nFirst, the @remotion/media package needs to be installed.  \nIf it is not, use the following command:\n\n```bash\nnpx remotion add @remotion/media # If project uses npm\nbunx remotion add @remotion/media # If project uses bun\nyarn remotion add @remotion/media # If project uses yarn\npnpm exec remotion add @remotion/media # If project uses pnpm\n```\n\nUse `<Video>` from `@remotion/media` to embed videos into your composition.\n\n```tsx\nimport { Video } from \"@remotion/media\";\nimport { staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return <Video src={staticFile(\"video.mp4\")} />;\n};\n```\n\nRemote URLs are also supported:\n\n```tsx\n<Video src=\"https://remotion.media/video.mp4\" />\n```\n\n## Trimming\n\nUse `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.\n\n```tsx\nconst { fps } = useVideoConfig();\n\nreturn (\n  <Video\n    src={staticFile(\"video.mp4\")}\n    trimBefore={2 * fps} // Skip the first 2 seconds\n    trimAfter={10 * fps} // End at the 10 second mark\n  />\n);\n```\n\n## Delaying\n\nWrap the video in a `<Sequence>` to delay when it appears:\n\n```tsx\nimport { Sequence, staticFile } from \"remotion\";\nimport { Video } from \"@remotion/media\";\n\nconst { fps } = useVideoConfig();\n\nreturn (\n  <Sequence from={1 * fps}>\n    <Video src={staticFile(\"video.mp4\")} />\n  </Sequence>\n);\n```\n\nThe video will appear after 1 second.\n\n## Sizing and Position\n\nUse the `style` prop to control size and position:\n\n```tsx\n<Video\n  src={staticFile(\"video.mp4\")}\n  style={{\n    width: 500,\n    height: 300,\n    position: \"absolute\",\n    top: 100,\n    left: 50,\n    objectFit: \"cover\",\n  }}\n/>\n```\n\n## Volume\n\nSet a static volume (0 to 1):\n\n```tsx\n<Video src={staticFile(\"video.mp4\")} volume={0.5} />\n```\n\nOr use a callback for dynamic volume based on the current frame:\n\n```tsx\nimport { interpolate } from \"remotion\";\n\nconst { fps } = useVideoConfig();\n\nreturn (\n  <Video\n    src={staticFile(\"video.mp4\")}\n    volume={(f) =>\n      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: \"clamp\" })\n    }\n  />\n);\n```\n\nUse `muted` to silence the video entirely:\n\n```tsx\n<Video src={staticFile(\"video.mp4\")} muted />\n```\n\n## Speed\n\nUse `playbackRate` to change the playback speed:\n\n```tsx\n<Video src={staticFile(\"video.mp4\")} playbackRate={2} /> {/* 2x speed */}\n<Video src={staticFile(\"video.mp4\")} playbackRate={0.5} /> {/* Half speed */}\n```\n\nReverse playback is not supported.\n\n## Looping\n\nUse `loop` to loop the video indefinitely:\n\n```tsx\n<Video src={staticFile(\"video.mp4\")} loop />\n```\n\nUse `loopVolumeCurveBehavior` to control how the frame count behaves when looping:\n\n- `\"repeat\"`: Frame count resets to 0 each loop (for `volume` callback)\n- `\"extend\"`: Frame count continues incrementing\n\n```tsx\n<Video\n  src={staticFile(\"video.mp4\")}\n  loop\n  loopVolumeCurveBehavior=\"extend\"\n  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops\n/>\n```\n\n## Pitch\n\nUse `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:\n\n```tsx\n<Video\n  src={staticFile(\"video.mp4\")}\n  toneFrequency={1.5} // Higher pitch\n/>\n<Video\n  src={staticFile(\"video.mp4\")}\n  toneFrequency={0.8} // Lower pitch\n/>\n```\n\nPitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`."}