Skip to main content

​
Using videos in Remotion

​
Prerequisites

First, the @remotion/media package needs to be installed.
If it is not, use the following command: 
npx remotion add @remotion/media # If project uses npm
bunx remotion add @remotion/media # If project uses bun
yarn remotion add @remotion/media # If project uses yarn
pnpm exec remotion add @remotion/media # If project uses pnpm
Use <Video> from @remotion/media to embed videos into your composition. 
import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} />;
};
Remote URLs are also supported: 
<Video src="https://remotion.media/video.mp4" />

​
Trimming

Use trimBefore and trimAfter to remove portions of the video. Values are in seconds. 
const { fps } = useVideoConfig();

return (
  <Video
    src={staticFile("video.mp4")}
    trimBefore={2 * fps} // Skip the first 2 seconds
    trimAfter={10 * fps} // End at the 10 second mark
  />
);

​
Delaying

Wrap the video in a <Sequence> to delay when it appears: 
import { Sequence, staticFile } from "remotion";
import { Video } from "@remotion/media";

const { fps } = useVideoConfig();

return (
  <Sequence from={1 * fps}>
    <Video src={staticFile("video.mp4")} />
  </Sequence>
);
The video will appear after 1 second.

​
Sizing and Position

Use the style prop to control size and position: 
<Video
  src={staticFile("video.mp4")}
  style={{
    width: 500,
    height: 300,
    position: "absolute",
    top: 100,
    left: 50,
    objectFit: "cover",
  }}
/>

​
Volume

Set a static volume (0 to 1): 
<Video src={staticFile("video.mp4")} volume={0.5} />
Or use a callback for dynamic volume based on the current frame: 
import { interpolate } from "remotion";

const { fps } = useVideoConfig();

return (
  <Video
    src={staticFile("video.mp4")}
    volume={(f) =>
      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
    }
  />
);
Use muted to silence the video entirely: 
<Video src={staticFile("video.mp4")} muted />

​
Speed

Use playbackRate to change the playback speed: 
<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
Reverse playback is not supported.

​
Looping

Use loop to loop the video indefinitely: 
<Video src={staticFile("video.mp4")} loop />
Use loopVolumeCurveBehavior to control how the frame count behaves when looping:
  • "repeat": Frame count resets to 0 each loop (for volume callback)
  • "extend": Frame count continues incrementing
<Video
  src={staticFile("video.mp4")}
  loop
  loopVolumeCurveBehavior="extend"
  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
/>

​
Pitch

Use toneFrequency to adjust the pitch without affecting speed. Values range from 0.01 to 2: 
<Video
  src={staticFile("video.mp4")}
  toneFrequency={1.5} // Higher pitch
/>
<Video
  src={staticFile("video.mp4")}
  toneFrequency={0.8} // Lower pitch
/>
Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the <Player />.