> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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](transformation_reference#c_crop_resize), 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: 

  
    
    
    
  
Auto-crop with focus on faces<code>c_fill,g_auto:faces

  
    
    
    
  
Pad with blurred background<code>c_pad,b_blurred:400:15

  
    
    
    
  
Keep the right half<code>c_crop,x_0.5

## Resize dimensions {anchor:setting_the_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)](transformation_reference#w_width) or [h (height)](transformation_reference#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](cloudinary_glossary#overlay).

**To set dimensions using aspect ratio:**

Use the [ar (aspect ratio)](transformation_reference#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](#cropping_modes) only): 
    * If `ar` > 1, the original width is maintained and the height is cropped to deliver the requested ratio.
    * If `ar` 

  
    
    
    
  
c_crop,h_200,w_200

  
    
    
    
  
c_scale,h_200,w_200

  
    
    
    
  
c_fill,h_200,w_200

  
    
    
    
  
b_black,c_pad,h_200,w_200

You could deliver the `c_crop` transformation shown above as follows:

![Solving a Rubik's cube](https://res.cloudinary.com/demo/video/upload/c_crop,h_200,w_200/docs/cld_rubiks_guy.mp4 "with_image:false")

```nodejs
cloudinary.video("docs/cld_rubiks_guy", {height: 200, width: 200, crop: "crop"})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(200).height(200)
);
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(200).height(200)
);
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(200).height(200)
);
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(200).height(200)
);
```

```python
CloudinaryVideo("docs/cld_rubiks_guy").video(height=200, width=200, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('docs/cld_rubiks_guy.mp4'))
	->resize(Resize::crop()->width(200)
->height(200));
```

```java
cloudinary.url().transformation(new Transformation().height(200).width(200).crop("crop")).videoTag("docs/cld_rubiks_guy");
```

```ruby
cl_video_tag("docs/cld_rubiks_guy", height: 200, width: 200, crop: "crop")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(200).Crop("crop")).BuildVideoTag("docs/cld_rubiks_guy")
```

```dart
cloudinary.video('docs/cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(200)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setWidth(200).setCrop("crop")).generate("docs/cld_rubiks_guy.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().height(200).width(200).crop("crop")).resourceType("video").generate("docs/cld_rubiks_guy.mp4");
```

```flutter
cloudinary.video('docs/cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(200)));
```

```kotlin
cloudinary.video {
	publicId("docs/cld_rubiks_guy.mp4")
	 resize(Resize.crop() { width(200)
 height(200) }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/cld_rubiks_guy", {height: 200, width: 200, crop: "crop"})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(200).height(200)
);
```

## Crop and resize mode details

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

> **READING**:
>
> * [Video crop modes](video_crop_modes): Detailed examples of `fill`, `fill_pad`, and `crop` modes, plus cropping videos with non-standard DAR.

> * [Video resize modes](video_resize_modes): Detailed examples of `scale`, `fit`, `limit`, `pad`, and `lpad`, including pad with blurred background and DPR.

> * [Video gravity for crops](video_gravity): Control which part of the video is kept when cropping, using compass positions, face detection, and automatic gravity.