1---
2name: videos
3description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch
4metadata:
5  tags: video, media, trim, volume, speed, loop, pitch
6---
7 
8# Using videos in Remotion
9 
10## Prerequisites
11 
12First, the @remotion/media package needs to be installed.  
13If it is not, use the following command:
14 
15```bash
16npx remotion add @remotion/media # If project uses npm
17bunx remotion add @remotion/media # If project uses bun
18yarn remotion add @remotion/media # If project uses yarn
19pnpm exec remotion add @remotion/media # If project uses pnpm
20```
21 
22Use `<Video>` from `@remotion/media` to embed videos into your composition.
23 
24```tsx
25import { Video } from "@remotion/media";
26import { staticFile } from "remotion";
27 
28export const MyComposition = () => {
29  return <Video src={staticFile("video.mp4")} />;
30};
31```
32 
33Remote URLs are also supported:
34 
35```tsx
36<Video src="https://remotion.media/video.mp4" />
37```
38 
39## Trimming
40 
41Use `trimBefore` and `trimAfter` to remove portions of the video. Values are in seconds.
42 
43```tsx
44const { fps } = useVideoConfig();
45 
46return (
47  <Video
48    src={staticFile("video.mp4")}
49    trimBefore={2 * fps} // Skip the first 2 seconds
50    trimAfter={10 * fps} // End at the 10 second mark
51  />
52);
53```
54 
55## Delaying
56 
57Wrap the video in a `<Sequence>` to delay when it appears:
58 
59```tsx
60import { Sequence, staticFile } from "remotion";
61import { Video } from "@remotion/media";
62 
63const { fps } = useVideoConfig();
64 
65return (
66  <Sequence from={1 * fps}>
67    <Video src={staticFile("video.mp4")} />
68  </Sequence>
69);
70```
71 
72The video will appear after 1 second.
73 
74## Sizing and Position
75 
76Use the `style` prop to control size and position:
77 
78```tsx
79<Video
80  src={staticFile("video.mp4")}
81  style={{
82    width: 500,
83    height: 300,
84    position: "absolute",
85    top: 100,
86    left: 50,
87    objectFit: "cover",
88  }}
89/>
90```
91 
92## Volume
93 
94Set a static volume (0 to 1):
95 
96```tsx
97<Video src={staticFile("video.mp4")} volume={0.5} />
98```
99 
100Or use a callback for dynamic volume based on the current frame:
101 
102```tsx
103import { interpolate } from "remotion";
104 
105const { fps } = useVideoConfig();
106 
107return (
108  <Video
109    src={staticFile("video.mp4")}
110    volume={(f) =>
111      interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
112    }
113  />
114);
115```
116 
117Use `muted` to silence the video entirely:
118 
119```tsx
120<Video src={staticFile("video.mp4")} muted />
121```
122 
123## Speed
124 
125Use `playbackRate` to change the playback speed:
126 
127```tsx
128<Video src={staticFile("video.mp4")} playbackRate={2} /> {/* 2x speed */}
129<Video src={staticFile("video.mp4")} playbackRate={0.5} /> {/* Half speed */}
130```
131 
132Reverse playback is not supported.
133 
134## Looping
135 
136Use `loop` to loop the video indefinitely:
137 
138```tsx
139<Video src={staticFile("video.mp4")} loop />
140```
141 
142Use `loopVolumeCurveBehavior` to control how the frame count behaves when looping:
143 
144- `"repeat"`: Frame count resets to 0 each loop (for `volume` callback)
145- `"extend"`: Frame count continues incrementing
146 
147```tsx
148<Video
149  src={staticFile("video.mp4")}
150  loop
151  loopVolumeCurveBehavior="extend"
152  volume={(f) => interpolate(f, [0, 300], [1, 0])} // Fade out over multiple loops
153/>
154```
155 
156## Pitch
157 
158Use `toneFrequency` to adjust the pitch without affecting speed. Values range from 0.01 to 2:
159 
160```tsx
161<Video
162  src={staticFile("video.mp4")}
163  toneFrequency={1.5} // Higher pitch
164/>
165<Video
166  src={staticFile("video.mp4")}
167  toneFrequency={0.8} // Lower pitch
168/>
169```
170 
171Pitch shifting only works during server-side rendering, not in the Remotion Studio preview or in the `<Player />`.
172