> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Video crop modes


When the dimensions you want to deliver differ from your original video, you can either crop the video to fit or pad it with extra space. Crop modes control how Cloudinary crops the video, determining which part to keep, whether to scale first, and how aggressively to crop. This page covers `fill`, `fill_pad`, and `crop`. For resize and padding modes (`scale`, `fit`, `limit`, `pad`, `lpad`), see [Video resize modes](video_resize_modes).

## fill

The `fill` cropping mode creates a video with the exact specified dimensions, without distorting the video. This option first scales up or down as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original video you want to keep if cropping occurs, using the [gravity][gravity-link] parameter (set to `center` by default).

**See full syntax**: [c_fill](transformation_reference#c_fill) in the _Transformation Reference_.
  
### Example 1: Fill a specific area with a video

Fill a 250-pixel square with the Rubik's cube video:

![Image filled to a width and height of 250 pixels](https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/docs/camera.jpg)

```nodejs
cloudinary.image("docs/camera.jpg", {height: 250, width: 250, crop: "fill"})
```

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

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

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

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

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

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

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

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

```python
CloudinaryImage("docs/camera.jpg").image(height=250, width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::fill()->width(250)
->height(250));
```

```java
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", height: 250, width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(250).Width(250).Crop("fill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("fill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.fill() { width(250)
 height(250) }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {height: 250, width: 250, crop: "fill"})
```

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

new CloudinaryImage("docs/camera.jpg").resize(fill().width(250).height(250));
```

![Video filled to a width and height of 250 pixels](https://res.cloudinary.com/demo/video/upload/c_fill,h_250,w_250/cld_rubiks_guy.mp4)

```nodejs
cloudinary.video("cld_rubiks_guy", {height: 250, width: 250, crop: "fill"})
```

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

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

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

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

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

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

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

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

```python
CloudinaryVideo("cld_rubiks_guy").video(height=250, width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('cld_rubiks_guy.mp4'))
	->resize(Resize::fill()->width(250)
->height(250));
```

```java
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fill")).videoTag("cld_rubiks_guy");
```

```ruby
cl_video_tag("cld_rubiks_guy", height: 250, width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(250).Crop("fill")).BuildVideoTag("cld_rubiks_guy")
```

```dart
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fill")).generate("cld_rubiks_guy.mp4")
```

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

```flutter
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.height(250)));
```

```kotlin
cloudinary.video {
	publicId("cld_rubiks_guy.mp4")
	 resize(Resize.fill() { width(250)
 height(250) }) 
}.generate()
```

```jquery
$.cloudinary.video("cld_rubiks_guy", {height: 250, width: 250, crop: "fill"})
```

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

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(fill().width(250).height(250));
```

### Example 2: Fill a specific area with a specific part of a video

Fill a 250-pixel square with the top-right part (gravity northeast) of the Rubik's cube video:

![Image filled to a width and height of 250 pixels with northeast gravity](https://res.cloudinary.com/demo/image/upload/ar_1.0,c_fill,g_north_east,w_250/docs/camera.jpg)

```nodejs
cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(aspect_ratio="1.0", gravity="north_east", width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new ImageTag('docs/camera.jpg'))
	->resize(Resize::fill()->width(250)
->aspectRatio(1.0)
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("north_east").Width(250).Crop("fill")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("north_east").setWidth(250).setCrop("fill")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 resize(Resize.fill() { width(250)
 aspectRatio(1.0F)
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryImage("docs/camera.jpg").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

![Video filled to a width and height of 250 pixels with northeast gravity](https://res.cloudinary.com/demo/video/upload/ar_1.0,c_fill,g_north_east,w_250/cld_rubiks_guy.mp4)

```nodejs
cloudinary.video("cld_rubiks_guy", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```

```python
CloudinaryVideo("cld_rubiks_guy").video(aspect_ratio="1.0", gravity="north_east", width=250, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('cld_rubiks_guy.mp4'))
	->resize(Resize::fill()->width(250)
->aspectRatio(1.0)
	->gravity(
	Gravity::compass(
	Compass::northEast()))
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).videoTag("cld_rubiks_guy");
```

```ruby
cl_video_tag("cld_rubiks_guy", aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1.0").Gravity("north_east").Width(250).Crop("fill")).BuildVideoTag("cld_rubiks_guy")
```

```dart
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("north_east").setWidth(250).setCrop("fill")).generate("cld_rubiks_guy.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("north_east").width(250).crop("fill")).resourceType("video").generate("cld_rubiks_guy.mp4");
```

```flutter
cloudinary.video('cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.fill().width(250)
.aspectRatio('1.0')
	.gravity(
	Gravity.compass(
	Compass.northEast()))
	));
```

```kotlin
cloudinary.video {
	publicId("cld_rubiks_guy.mp4")
	 resize(Resize.fill() { width(250)
 aspectRatio(1.0F)
	 gravity(
	Gravity.compass(
	Compass.northEast()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("cld_rubiks_guy", {aspect_ratio: "1.0", gravity: "north_east", width: 250, crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  fill()
    .width(250)
    .aspectRatio("1.0")
    .gravity(compass("north_east"))
);
```
## fill_pad

The `fill_pad` cropping mode tries to prevent a "bad crop" by adding padding to any frames where interesting content is lost if the standard `fill` mode is applied. It's especially useful if the aspect ratio of the delivered video is considerably different from the original's aspect ratio. It's only supported in conjunction with [Automatic gravity](video_gravity) (g_auto).

> **NOTES**:
>
> * For `fill_pad` to work on videos, you must specify two of the following: [w (width)](transformation_reference#w_width) | [h (height)](transformation_reference#h_height) | [ar (aspect ratio)](transformation_reference#ar_aspect_ratio).

> * The [background parameter](transformation_reference#b_background) isn't supported for videos in conjunction with `fill_pad`.

**See full syntax**: [c_fill_pad](transformation_reference#c_fill_pad) in the _Transformation Reference_.

### Example: Compare standard fill mode with fill_pad mode

The video on the left is delivered at 9:16 aspect ratio using the `fill` crop mode, and the video on the right using the `fill_pad` crop mode. You'll see the beginning of the video is cropped the same, but the video on the right then pads the video to ensure all of the subjects are shown.

  
    
    
    
  
Original video (click to play)

![Video of girls having drinks](https://res.cloudinary.com/demo/video/upload/so_7.0/ar_9:16,c_fill_pad,g_auto,h_400/docs/g_auto_demo.mp4 "with_image:false")

```nodejs
cloudinary.video("docs/g_auto_demo", {transformation: [
  {start_offset: "7.0"},
  {aspect_ratio: "9:16", gravity: "auto", height: 400, crop: "fill_pad"}
  ]})
```

```react
import { trim } from "@cloudinary/url-gen/actions/videoEdit";
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .videoEdit(trim().startOffset("7.0"))
  .resize(
    fillPad()
      .height(400)
      .aspectRatio("9:16")
      .gravity(autoGravity())
  );
```

```vue
import { trim } from "@cloudinary/url-gen/actions/videoEdit";
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .videoEdit(trim().startOffset("7.0"))
  .resize(
    fillPad()
      .height(400)
      .aspectRatio("9:16")
      .gravity(autoGravity())
  );
```

```angular
import { trim } from "@cloudinary/url-gen/actions/videoEdit";
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .videoEdit(trim().startOffset("7.0"))
  .resize(
    fillPad()
      .height(400)
      .aspectRatio("9:16")
      .gravity(autoGravity())
  );
```

```js
import { trim } from "@cloudinary/url-gen/actions/videoEdit";
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .videoEdit(trim().startOffset("7.0"))
  .resize(
    fillPad()
      .height(400)
      .aspectRatio("9:16")
      .gravity(autoGravity())
  );
```

```python
CloudinaryVideo("docs/g_auto_demo").video(transformation=[
  {'start_offset': "7.0"},
  {'aspect_ratio': "9:16", 'gravity': "auto", 'height': 400, 'crop': "fill_pad"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;

(new VideoTag('docs/g_auto_demo.mp4'))
	->videoEdit(VideoEdit::trim()->startOffset(7.0))
	->resize(Resize::fillPad()->height(400)
->aspectRatio("9:16")
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .startOffset("7.0").chain()
  .aspectRatio("9:16").gravity("auto").height(400).crop("fill_pad")).videoTag("docs/g_auto_demo");
```

```ruby
cl_video_tag("docs/g_auto_demo", transformation: [
  {start_offset: "7.0"},
  {aspect_ratio: "9:16", gravity: "auto", height: 400, crop: "fill_pad"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .StartOffset("7.0").Chain()
  .AspectRatio("9:16").Gravity("auto").Height(400).Crop("fill_pad")).BuildVideoTag("docs/g_auto_demo")
```

```dart
cloudinary.video('docs/g_auto_demo.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().startOffset('7.0'))
	.resize(Resize.fillPad().height(400)
.aspectRatio("9:16")
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setStartOffset("7.0").chain()
  .setAspectRatio("9:16").setGravity("auto").setHeight(400).setCrop("fill_pad")).generate("docs/g_auto_demo.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .startOffset("7.0").chain()
  .aspectRatio("9:16").gravity("auto").height(400).crop("fill_pad")).resourceType("video").generate("docs/g_auto_demo.mp4");
```

```flutter
cloudinary.video('docs/g_auto_demo.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().startOffset('7.0'))
	.resize(Resize.fillPad().height(400)
.aspectRatio("9:16")
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.video {
	publicId("docs/g_auto_demo.mp4")
	 videoEdit(VideoEdit.trim() { startOffset(7.0F) })
	 resize(Resize.fillPad() { height(400)
 aspectRatio("9:16")
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/g_auto_demo", {transformation: [
  {start_offset: "7.0"},
  {aspect_ratio: "9:16", gravity: "auto", height: 400, crop: "fill_pad"}
  ]})
```

```react_native
import { trim } from "@cloudinary/url-gen/actions/videoEdit";
import { fillPad } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("docs/g_auto_demo.mp4")
  .videoEdit(trim().startOffset("7.0"))
  .resize(
    fillPad()
      .height(400)
      .aspectRatio("9:16")
      .gravity(autoGravity())
  );
```

  
    
    
    
  
c_fill

  
    
    
    
  
c_fill_pad

## crop

The `crop` cropping mode extracts a region of the specified dimensions from the original video. No scaling is applied, so applying the `crop` mode to the same video of different resolutions can provide very different results. You can specify the [gravity](video_resizing_and_cropping#control_gravity) parameter to select which area or object to extract, or use [fixed coordinates cropping](#fixed_coordinates_cropping).

**See full syntax**: [c_crop](transformation_reference#c_crop) in the _Transformation Reference_.

### Example 1: Crop a video to specified dimensions (width and height)

Crop the video to a width of 500 pixels and a height of 1000 pixels, with north gravity:

![Woman video cropped to 500x1000 with north gravity](https://res.cloudinary.com/demo/video/upload/c_crop,g_north,h_1000,w_500/docs/woman-camera-portrait.mp4 "thumb:c_scale,w_200, width:200")

```nodejs
cloudinary.video("docs/woman-camera-portrait", {gravity: "north", height: 1000, width: 500, crop: "crop"})
```

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

new CloudinaryVideo("docs/woman-camera-portrait.mp4").resize(
  crop()
    .width(500)
    .height(1000)
    .gravity(compass("north"))
);
```

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

new CloudinaryVideo("docs/woman-camera-portrait.mp4").resize(
  crop()
    .width(500)
    .height(1000)
    .gravity(compass("north"))
);
```

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

new CloudinaryVideo("docs/woman-camera-portrait.mp4").resize(
  crop()
    .width(500)
    .height(1000)
    .gravity(compass("north"))
);
```

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

new CloudinaryVideo("docs/woman-camera-portrait.mp4").resize(
  crop()
    .width(500)
    .height(1000)
    .gravity(compass("north"))
);
```

```python
CloudinaryVideo("docs/woman-camera-portrait").video(gravity="north", height=1000, width=500, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('docs/woman-camera-portrait.mp4'))
	->resize(Resize::crop()->width(500)
->height(1000)
	->gravity(
	Gravity::compass(
	Compass::north()))
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("north").height(1000).width(500).crop("crop")).videoTag("docs/woman-camera-portrait");
```

```ruby
cl_video_tag("docs/woman-camera-portrait", gravity: "north", height: 1000, width: 500, crop: "crop")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity("north").Height(1000).Width(500).Crop("crop")).BuildVideoTag("docs/woman-camera-portrait")
```

```dart
cloudinary.video('docs/woman-camera-portrait.mp4').transformation(Transformation()
	.resize(Resize.crop().width(500)
.height(1000)
	.gravity(
	Gravity.compass(
	Compass.north()))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setGravity("north").setHeight(1000).setWidth(500).setCrop("crop")).generate("docs/woman-camera-portrait.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("north").height(1000).width(500).crop("crop")).resourceType("video").generate("docs/woman-camera-portrait.mp4");
```

```flutter
cloudinary.video('docs/woman-camera-portrait.mp4').transformation(Transformation()
	.resize(Resize.crop().width(500)
.height(1000)
	.gravity(
	Gravity.compass(
	Compass.north()))
	));
```

```kotlin
cloudinary.video {
	publicId("docs/woman-camera-portrait.mp4")
	 resize(Resize.crop() { width(500)
 height(1000)
	 gravity(
	Gravity.compass(
	Compass.north()))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/woman-camera-portrait", {gravity: "north", height: 1000, width: 500, crop: "crop"})
```

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

new CloudinaryVideo("docs/woman-camera-portrait.mp4").resize(
  crop()
    .width(500)
    .height(1000)
    .gravity(compass("north"))
);
```

### Example 2: Crop a video to specified dimensions (aspect ratio and width)

Crop the video to a width of 1000 pixels and an aspect ratio of 2.5:

![Footprints in the sand video cropped to 1000 width with aspect ratio of 2.5](https://res.cloudinary.com/demo/video/upload/ar_2.5,c_crop,w_1000/docs/footprints-in-the-sand.mp4 "thumb:c_scale,w_500, width:500")

```nodejs
cloudinary.video("docs/footprints-in-the-sand", {aspect_ratio: "2.5", width: 1000, crop: "crop"})
```

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

new CloudinaryVideo("docs/footprints-in-the-sand.mp4").resize(
  crop().width(1000).aspectRatio(2.5)
);
```

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

new CloudinaryVideo("docs/footprints-in-the-sand.mp4").resize(
  crop().width(1000).aspectRatio(2.5)
);
```

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

new CloudinaryVideo("docs/footprints-in-the-sand.mp4").resize(
  crop().width(1000).aspectRatio(2.5)
);
```

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

new CloudinaryVideo("docs/footprints-in-the-sand.mp4").resize(
  crop().width(1000).aspectRatio(2.5)
);
```

```python
CloudinaryVideo("docs/footprints-in-the-sand").video(aspect_ratio="2.5", width=1000, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('docs/footprints-in-the-sand.mp4'))
	->resize(Resize::crop()->width(1000)
->aspectRatio(2.5));
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("2.5").width(1000).crop("crop")).videoTag("docs/footprints-in-the-sand");
```

```ruby
cl_video_tag("docs/footprints-in-the-sand", aspect_ratio: "2.5", width: 1000, crop: "crop")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("2.5").Width(1000).Crop("crop")).BuildVideoTag("docs/footprints-in-the-sand")
```

```dart
cloudinary.video('docs/footprints-in-the-sand.mp4').transformation(Transformation()
	.resize(Resize.crop().width(1000)
.aspectRatio(2.5)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("2.5").setWidth(1000).setCrop("crop")).generate("docs/footprints-in-the-sand.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("2.5").width(1000).crop("crop")).resourceType("video").generate("docs/footprints-in-the-sand.mp4");
```

```flutter
cloudinary.video('docs/footprints-in-the-sand.mp4').transformation(Transformation()
	.resize(Resize.crop().width(1000)
.aspectRatio(2.5)));
```

```kotlin
cloudinary.video {
	publicId("docs/footprints-in-the-sand.mp4")
	 resize(Resize.crop() { width(1000)
 aspectRatio(2.5F) }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/footprints-in-the-sand", {aspect_ratio: "2.5", width: 1000, crop: "crop"})
```

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

new CloudinaryVideo("docs/footprints-in-the-sand.mp4").resize(
  crop().width(1000).aspectRatio(2.5)
);
```

### Fixed coordinates cropping

You can specify a region of the original video to crop by giving the `x` and `y` coordinates of the top left corner of the region together with the `width` and `height` of the region. You can also use percentage based numbers instead of the exact coordinates for `x`, `y`, `w` and `h` (e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original video. 
  
To resize the Rubik's cube video to focus mainly on the cube, the video is cropped to a 150x150 region starting at the coordinate x = 10 and y = 80:

![150x150 video generated with fixed-coordinates cropping](https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_150,x_10,y_80/docs/cld_rubiks_guy.mp4 "width:150")

```nodejs
cloudinary.video("docs/cld_rubiks_guy", {height: 150, width: 150, x: 10, y: 80, crop: "crop"})
```

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

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(150).height(150).x(10).y(80)
);
```

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

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(150).height(150).x(10).y(80)
);
```

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

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(150).height(150).x(10).y(80)
);
```

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

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(150).height(150).x(10).y(80)
);
```

```python
CloudinaryVideo("docs/cld_rubiks_guy").video(height=150, width=150, x=10, y=80, crop="crop")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('docs/cld_rubiks_guy.mp4'))
	->resize(Resize::crop()->width(150)
->height(150)
->x(10)
->y(80));
```

```java
cloudinary.url().transformation(new Transformation().height(150).width(150).x(10).y(80).crop("crop")).videoTag("docs/cld_rubiks_guy");
```

```ruby
cl_video_tag("docs/cld_rubiks_guy", height: 150, width: 150, x: 10, y: 80, crop: "crop")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(150).Width(150).X(10).Y(80).Crop("crop")).BuildVideoTag("docs/cld_rubiks_guy")
```

```dart
cloudinary.video('docs/cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.crop().width(150)
.height(150)
.x(10)
.y(80)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(150).setWidth(150).setX(10).setY(80).setCrop("crop")).generate("docs/cld_rubiks_guy.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().height(150).width(150).x(10).y(80).crop("crop")).resourceType("video").generate("docs/cld_rubiks_guy.mp4");
```

```flutter
cloudinary.video('docs/cld_rubiks_guy.mp4').transformation(Transformation()
	.resize(Resize.crop().width(150)
.height(150)
.x(10)
.y(80)));
```

```kotlin
cloudinary.video {
	publicId("docs/cld_rubiks_guy.mp4")
	 resize(Resize.crop() { width(150)
 height(150)
 x(10)
 y(80) }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/cld_rubiks_guy", {height: 150, width: 150, x: 10, y: 80, crop: "crop"})
```

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

new CloudinaryVideo("docs/cld_rubiks_guy.mp4").resize(
  crop().width(150).height(150).x(10).y(80)
);
```

## Cropping videos with non-standard DAR

Some videos have a Display Aspect Ratio (DAR) that differs from their storage dimensions. This is common with anamorphic video content, where the video is stored at one resolution (e.g., 1440x1080) but is intended to be displayed at another (e.g., 1920x1080). The DAR metadata in the video file tells video players how to scale the pixels for correct display.

When you apply a crop or resize mode to anamorphic video, Cloudinary calculates output dimensions from the storage pixel dimensions. By default, Cloudinary also resets the DAR metadata to match the output pixel dimensions. The crop modes affected by this reset are `c_scale`, `c_fit`, `c_limit`, `c_fill`, and `c_pad`. Note that `c_crop` isn't affected because it doesn't modify DAR metadata.

For example, applying `c_fill` with only a width to this anamorphic video produces a distorted result because the height is calculated from the storage dimensions and the DAR is reset:

![Anamorphic video with c_fill - distorted without fl_keep_dar](https://res.cloudinary.com/demo/video/upload/c_fill,w_1000/docs/anamorphic_dar_sample.mp4 "width:500")

```nodejs
cloudinary.video("docs/anamorphic_dar_sample", {width: 1000, crop: "fill"})
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4").resize(
  fill().width(1000)
);
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4").resize(
  fill().width(1000)
);
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4").resize(
  fill().width(1000)
);
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4").resize(
  fill().width(1000)
);
```

```python
CloudinaryVideo("docs/anamorphic_dar_sample").video(width=1000, crop="fill")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('docs/anamorphic_dar_sample.mp4'))
	->resize(Resize::fill()->width(1000));
```

```java
cloudinary.url().transformation(new Transformation().width(1000).crop("fill")).videoTag("docs/anamorphic_dar_sample");
```

```ruby
cl_video_tag("docs/anamorphic_dar_sample", width: 1000, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(1000).Crop("fill")).BuildVideoTag("docs/anamorphic_dar_sample")
```

```dart
cloudinary.video('docs/anamorphic_dar_sample.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1000)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(1000).setCrop("fill")).generate("docs/anamorphic_dar_sample.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().width(1000).crop("fill")).resourceType("video").generate("docs/anamorphic_dar_sample.mp4");
```

```flutter
cloudinary.video('docs/anamorphic_dar_sample.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1000)));
```

```kotlin
cloudinary.video {
	publicId("docs/anamorphic_dar_sample.mp4")
	 resize(Resize.fill() { width(1000) }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/anamorphic_dar_sample", {width: 1000, crop: "fill"})
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4").resize(
  fill().width(1000)
);
```

Adding [`fl_keep_dar`](transformation_reference#fl_keep_dar) preserves the original DAR metadata, so the player displays the video at the correct aspect ratio:

![Anamorphic video with c_fill and fl_keep_dar - correct display](https://res.cloudinary.com/demo/video/upload/c_fill,w_1000/fl_keep_dar/docs/anamorphic_dar_sample.mp4 "width:500")

```nodejs
cloudinary.video("docs/anamorphic_dar_sample", {transformation: [
  {width: 1000, crop: "fill"},
  {flags: "keep_dar"}
  ]})
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4")
  .resize(fill().width(1000))
  .addFlag("keep_dar");
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4")
  .resize(fill().width(1000))
  .addFlag("keep_dar");
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4")
  .resize(fill().width(1000))
  .addFlag("keep_dar");
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4")
  .resize(fill().width(1000))
  .addFlag("keep_dar");
```

```python
CloudinaryVideo("docs/anamorphic_dar_sample").video(transformation=[
  {'width': 1000, 'crop': "fill"},
  {'flags': "keep_dar"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Flag;

(new VideoTag('docs/anamorphic_dar_sample.mp4'))
	->resize(Resize::fill()->width(1000))
	->addFlag(
	Flag::keepDar());
```

```java
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("fill").chain()
  .flags("keep_dar")).videoTag("docs/anamorphic_dar_sample");
```

```ruby
cl_video_tag("docs/anamorphic_dar_sample", transformation: [
  {width: 1000, crop: "fill"},
  {flags: "keep_dar"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(1000).Crop("fill").Chain()
  .Flags("keep_dar")).BuildVideoTag("docs/anamorphic_dar_sample")
```

```dart
cloudinary.video('docs/anamorphic_dar_sample.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1000))
	.addFlag(
	Flag.keepDar()));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("fill").chain()
  .setFlags("keep_dar")).generate("docs/anamorphic_dar_sample.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("fill").chain()
  .flags("keep_dar")).resourceType("video").generate("docs/anamorphic_dar_sample.mp4");
```

```flutter
cloudinary.video('docs/anamorphic_dar_sample.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1000))
	.addFlag(
	Flag.keepDar()));
```

```kotlin
cloudinary.video {
	publicId("docs/anamorphic_dar_sample.mp4")
	 resize(Resize.fill() { width(1000) })
	 addFlag(
	Flag.keepDar()) 
}.generate()
```

```jquery
$.cloudinary.video("docs/anamorphic_dar_sample", {transformation: [
  {width: 1000, crop: "fill"},
  {flags: "keep_dar"}
  ]})
```

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

new CloudinaryVideo("docs/anamorphic_dar_sample.mp4")
  .resize(fill().width(1000))
  .addFlag("keep_dar");
```

> **NOTE**: When you specify both width and height with `c_fill`, Cloudinary crops to the exact requested dimensions and resets DAR to match, so the output displays correctly by default. Adding `fl_keep_dar` in this case preserves the original DAR on the new pixel dimensions, causing the player to stretch or squish the video. Avoid using `fl_keep_dar` with `c_fill` on anamorphic video when specifying both width and height.

> **READING**:
>
> * [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.

[gravity-link]:video_gravity