Skip to main content

Resize a video

You can resize a video in the browser using convertMedia() function from the @remotion/webcodecs package.

💼 Important License Disclaimer
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.
🚧 Unstable API
This package is experimental.
We might change the API at any time, until we remove this notice.

Simple Example​

Scale a video down to 480p
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'mp4',
  resize: {
    mode: 'max-height',
    maxHeight: 480,
  },
});
Scale a video down to 480p
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'mp4',
  resize: {
    mode: 'max-height',
    maxHeight: 480,
  },
});

Resize modes​

For the resize value, you can specify the following modes:

max-height​

Scale a video down to 480p
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-height',
  maxHeight: 480,
};
Scale a video down to 480p
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-height',
  maxHeight: 480,
};

Scales a video down so it is at most maxHeight pixels tall.

max-width​

Scale a video down to 640 pixels wide
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-width',
  maxWidth: 640,
};
Scale a video down to 640 pixels wide
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-width',
  maxWidth: 640,
};

Scales a video down so it is at most maxWidth pixels wide.

width​

Scale a video to 640 pixels wide
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'width',
  width: 640,
};
Scale a video to 640 pixels wide
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'width',
  width: 640,
};

Scales a video to exactly width pixels wide.

height​

Scale a video to 480 pixels tall
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'height',
  height: 480,
};
Scale a video to 480 pixels tall
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'height',
  height: 480,
};

Scales a video to exactly height pixels tall.

max-height-width​

Scale a video down to 480px height or 640 pixels width
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-height-width',
  maxHeight: 480,
  maxWidth: 640,
};
Scale a video down to 480px height or 640 pixels width
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'max-height-width',
  maxHeight: 480,
  maxWidth: 640,
};

Scales a video down so it is at most maxHeight pixels tall or maxWidth pixels wide.
The video will be scaled down to the biggest size that fits both constraints.

scale​

Scale a video to 50%
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'scale',
  scale: 0.5,
};
Scale a video to 50%
tsx
import {ResizeOperation} from '@remotion/webcodecs';
 
const resize: ResizeOperation = {
  mode: 'scale',
  scale: 0.5,
};

Scales a video by a factor of scale. Factor must be greater than 0.

Order of operations​

If you apply both a rotate and a resize operation, the rotate operation will be applied first.

See also​