Video resizing and cropping

Responsive design and art direction generally requires displaying videos at a variety of sizes, often much smaller than the original.

If you deliver full size videos and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to download unnecessarily large files. Therefore, videos should always be delivered from the server at their final size.

When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server side, and the asset is always delivered to the browser at the requested size.

Here are some examples of different cropping or resizing techniques used on the same video:

Resize dimensions

You can set the target dimensions of your resized video by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.

To set dimensions using exact pixel values:

• Use an integer value for w (width) or h (height). For example, w_150 sets the width to exactly 150 pixels.

To set dimensions relative to the original:

• Use a decimal value for width or height. For example, w_0.5 sets the width to half the original width.
• Use ih or iw as values to set the dimension to the initial height or initial width of the original video respectively. For example, w_iw sets the width to the same value as the original width. This may be useful when applying chained transformations or setting the dimensions of an overlay.

To set dimensions using aspect ratio:

Use the ar (aspect ratio) parameter with one of the following formats:

• a:b where a signifies the relative width and b the relative height (e.g., ar_4:3 or ar_16:9).
• A decimal value representing the ratio of the width divided by the height (e.g., ar_1.33 or ar_2.5). 1.0 is a perfect square.

Automatic dimension calculation:

When specifying the dimensions for a scale crop, you'll generally want to only specify one dimension, and let Cloudinary automatically determine the other dimension to ensure the original aspect ratio is preserved.

Conversely, when using a resize mode that's intended to crop part of the asset and change the aspect ratio compared to the original, it's generally recommended to specify both width and height or width/height along with an aspect ratio to define the exact required dimensions. However, in rare cases, you may choose to specify only one of these three resize qualifiers, and let Cloudinary automatically determine the missing dimension as follows:

• If you provide only width or only height, then the other dimension is automatically calculated to deliver the original aspect ratio. For example, if your original asset is 400*600, then specifying c_crop,w_200 is the same as specifying c_crop,w_200,h_300. Supported for all resize and crop modes.
  
• If you provide only the aspect ratio (for cropping modes only):
  • If ar > 1, the original width is maintained and the height is cropped to deliver the requested ratio.
  • If ar < 1, the original height is maintained, and the width is cropped accordingly.
  • If ar == 1:
    • If the image is wider than taller, the result will use the full height of the image and crop the width as needed.
    • If the image is taller than wider, the result will use the full width of the image and crop the height as needed.

Resize and crop modes

When changing the dimensions of an uploaded video by setting the video's height, width, and/or aspect ratio, you need to decide how to resize or crop the video to fit into the requested size. Use the c (crop/resize) parameter for selecting the crop/resize mode. Cloudinary supports the following video resize/crop modes:

Some of the cropping modes keep only a certain part of the original video in the resulting video. By default, the center of the video is kept in the crop, but this is not always ideal. To keep the parts of the video that are important to you, you can use the gravity parameter. For example, you can specify to keep faces, or gravitate towards an automatically determined area of interest. You can also guide the crop towards areas of your video defined by compass points, for example, north to keep the top part of the video, or south_east to keep the bottom-right part.

Resize and crop mode examples

The following examples show the same video resized to a width and height of 200 pixels, using different methods of resizing and cropping.

The original video is 224 x 400 pixels:

Resizing the video to 200 x 200 pixels, using crop, scale, fill and pad results in the following videos:

You could deliver the c_crop transformation shown above as follows:

Crop and resize mode details

Each crop and resize mode has its own behavior, examples, and options. See Video crop modes for detailed examples of all modes.