Resize Videos

You can use the width, height, and fit props to resize your videos.

Resize proportionally

If you only provide one of the two dimensions, the video will be resized proportionally.

For example, a Task with width: 960 will resize a 1920x1080 input video to 960x540: the 960 is set by the width prop, and the height is calculated to maintain the original aspect ratio (960 is 50% of 1920, 50% of 1080 is 540).

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
});

(See SDKs for install and initialization steps.)

Resize to a specific size

If you provide both the width and height props, the video will be resized to the exact size you specify.

For example, a Task with width: 960 and height: 960 will resize a 1920x1080 input video to 960x960: both dimensions are set explicitly by the width and the height props.

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
  height: 960,
});

Control how the video is resized

In the previous examples, the video was resized to the exact size you specified, but that may distort the aspect ratio of the video. Making the output video look stretched or squashed.

The fit prop allows you to control how the video is resized.

fit: "cover"

The video is resized to cover the specified dimensions, while maintaining the original aspect ratio. Any part of the video that does not fit within the specified dimensions will be cropped.

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
  height: 960,
  fit: 'cover',
});

fit: "contain"

The video is resized to fit within the specified dimensions, while maintaining the original aspect ratio. The video may have extra padding on the top and bottom, or the left and right, depending on the aspect ratio of the input video.

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
  height: 960,
  fit: 'contain',
});

position: "<position>"

You can use the position prop to control where the video is placed within the specified dimensions. For example, to always show the top of the video even when cropping, you can use position: "top".

The available values are:

• top
• top-right
• right
• bottom-right
• bottom
• bottom-left
• left
• top-left

If you don't specify a position, the video will be centered within the specified dimensions.

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
  height: 960,
  fit: 'cover',
  position: 'top-left',
});

background: "<color>"

You can use the background prop to specify a background color for the video. The background color will be used for any extra padding added to the video when it is resized.

The background color must be a valid hex color e.g. #000000, #ffffff, or #bada55.

const task = await ittybit.tasks.create({
  kind: 'video',
  url: 'https://ittyb.it/sample.mp4',
  width: 960,
  height: 960,
  fit: 'contain',
  position: 'top-left',
  background: '#20B075',
});