GitHub

Layer configuration

Size

The Size config allows you to resize your layer by specifying format, height and width attributes.

Interface

interface Size {
  size?: {
    // defaults to undefined
    format?: "fill" | "fit" | "stretch";


    // number of pixels,
    // defaults to original media height or composition height
    height?: number;


    // number of pixels,
    // defaults to original media width or composition width
    width?: number;
  };
}

Configuring Size

You can modify a layer's size-related settings by passing a configuration object or by calling its setters. You can read the layer's size-related settings by calling its getters

Layer Configuration

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4",
  {
    size: {
      height: 540,
    },
  }
);

Output

Setters

setFormat

fill

Scales the media while preserving its original aspect-ratio so that it completely fills the composition without white space. If the proportions of the composition are different from the media, the media will be cropped. Equivalent to the cover background-size in CSS.

const composition = await editframe.videos.new({ duration: 10, dimensions: { height: 1080, width: 1080 }});


const video = await composition.addVideo("https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4");


video.setFormat("fill"); // filling a 1:1 composition with a 16:9 video
Output

fit

Scales the media while preserving its original aspect-ratio so that the its width is equal to the composition's width. If the proportions of the composiion are different from the media, there will be white space in the composition above and below the media.

const composition = await editframe.videos.new({ duration: 10, dimensions: { height: 1080, width: 1080 }})\n
const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4"
);


video.setFormat("fit"); // fitting a 16:9 video into a 1:1 composition
Output

stretch

The stretch format sets the layer's width to the width of the composition, causing a stretch effect.

const composition = await editframe.videos.new({ duration: 10, dimensions: { height: 1080, width: 1080 }})


const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4"
);


video.setFormat("stretch"); // stretching a 16:9 video into a 1:1 composition
Output

setDimensions

Setting both height and width will stretch the image unless the new values produce the same aspect ratio.

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4"
);


video.setDimensions({ height: 200, width: 960 });

Output

setHeight

Setting only height will scale the layer by the percentage increase or decrease of the height. Setting both height and width will stretch the image unless the new values produce the same aspect ratio.

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4"
);


video.setHeight(200);

Output

setWidth

Setting only width will scale the layer by the percentage increase or decrease of the width. Setting both height and width will stretch the image unless the new values produce the same aspect ratio.

const video = await composition.addVideo(
  "https://editframe.com/docs/layer-configuration/size/record-player-720p.mp4"
);


video.setWidth(960);

Output

Getters

image.format; // -> "fill"
image.height; // -> 300
image.width; // -> 600
Previous
Position