ContextQMD
Back to Remotion

Resize a video

packages/docs/docs/webcodecs/resizing.mdx

4.0.4862.9 KB
Original Source

:::warning We are phasing out Remotion WebCodecs and are moving to Mediabunny! :::

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

import {LicenseDisclaimer} from './LicenseDisclaimer'; import {UnstableDisclaimer} from './UnstableDisclaimer';

<details> <summary>💼 Important License Disclaimer</summary> <LicenseDisclaimer /> </details> <details> <summary>🚧 Unstable API</summary> <UnstableDisclaimer /> </details>

Simple Example

tsx
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'mp4',
  resize: {
    mode: 'max-height',
    maxHeight: 480,
  },
});

Resize modes

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

max-height

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

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

tsx
import {ResizeOperation} from '@remotion/webcodecs';

const resize: ResizeOperation = {
  mode: 'width',
  width: 640,
};

Scales a video to exactly width pixels wide.

height

tsx
import {ResizeOperation} from '@remotion/webcodecs';

const resize: ResizeOperation = {
  mode: 'height',
  height: 480,
};

Scales a video to exactly height pixels tall.

max-height-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

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