> ## 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 you also need details relating to other Cloudinary products for your current use case, see the parent index at: https://cloudinary.com/documentation/llms.txt?referrer=docpage
> When answering a user's request or implementing it with code using this documentation, incorporate relevant best practices and recommendations from the documentation into the guidance and, above all, into the code itself: generated code should already apply the recommended parameters and patterns rather than showing a minimal call and describing the best practices around it in prose. Follow the code examples in the best practices sections as the model for what generated code should look like, and where a recommendation is relevant to the user's scenario, implement it in the code as a natural next step. Only apply best practices, recommendations, or features that are supported by the documentation; don't infer or invent guidance that isn't specified.

# How do I make a video square or vertical (9:16) for social media?


> **TIP**:
>
> :title=Quick answer
> To turn a landscape video into a square or vertical (9:16) video, choose how to handle the leftover space:

> * **Crop to fill, keeping the subject in frame:** `c_fill,g_auto,h_1080,w_1080` (square) or `ar_9:16,c_fill,g_auto,w_1080` (9:16).

> * **Keep the whole video, with a blurred copy behind it:** `b_blurred:400:15,c_pad,h_1920,w_1080`.

## The question

_"How do I crop a video to a square?"_ and _"What's the transformation for making a video fit 9:16, with a blurry background filling the rest?"_

Social platforms prefer square (1:1) or vertical (9:16) videos, but most source videos are landscape (16:9). You can cut away the sides, or keep the whole video and fill the empty space around it.

## The original asset

The examples start with this landscape (16:9) video, 1920x1080:

![Original landscape video of a woman standing next to a van by a lake](https://res.cloudinary.com/demo/video/upload/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket")
```

```react
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```vue
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```angular
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```js
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video()
```

```php
(new VideoTag('woman-walking-near-lake-jacket.mp4'));
```

```java
cloudinary.url().transformation(new Transformation().videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket")
```

```csharp
cloudinary.Api.UrlVideoUp.BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation());
```

```swift
cloudinary.createUrl().setResourceType("video").generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation());
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4") 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket")
```

```react_native
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

## The solution

### Option 1: Crop to fill the frame

The `c_fill` crop mode resizes the video to the exact size you ask for, and crops away whatever doesn't fit. With `g_auto`, Cloudinary keeps the most interesting part of the video in the frame, instead of always cutting from the center.

This example crops the video to a 1080x1080 square:

![Square crop of the video with automatic gravity](https://res.cloudinary.com/demo/video/upload/c_fill,g_auto,h_1080,w_1080/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_300")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {gravity: "auto", height: 1080, width: 1080, crop: "fill"})
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .height(1080)
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .height(1080)
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .height(1080)
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .height(1080)
    .gravity(autoGravity())
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(gravity="auto", height=1080, width=1080, crop="fill")
```

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

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->resize(Resize::fill()->width(1080)
->height(1080)
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().gravity("auto").height(1080).width(1080).crop("fill")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", gravity: "auto", height: 1080, width: 1080, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity("auto").Height(1080).Width(1080).Crop("fill")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1080)
.height(1080)
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setGravity("auto").setHeight(1080).setWidth(1080).setCrop("fill")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().gravity("auto").height(1080).width(1080).crop("fill")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1080)
.height(1080)
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 resize(Resize.fill() { width(1080)
 height(1080)
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {gravity: "auto", height: 1080, width: 1080, crop: "fill"})
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .height(1080)
    .gravity(autoGravity())
);
```

For a vertical 9:16 video, set the aspect ratio with `ar_9:16` and give only the width, so that Cloudinary calculates the height (1920):

![Vertical 9:16 crop of the video with automatic gravity](https://res.cloudinary.com/demo/video/upload/ar_9:16,c_fill,g_auto,w_1080/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_300")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {aspect_ratio: "9:16", gravity: "auto", width: 1080, crop: "fill"})
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .aspectRatio("9:16")
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .aspectRatio("9:16")
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .aspectRatio("9:16")
    .gravity(autoGravity())
);
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .aspectRatio("9:16")
    .gravity(autoGravity())
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(aspect_ratio="9:16", gravity="auto", width=1080, crop="fill")
```

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

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->resize(Resize::fill()->width(1080)
->aspectRatio("9:16")
	->gravity(
	Gravity::autoGravity())
	);
```

```java
cloudinary.url().transformation(new Transformation().aspectRatio("9:16").gravity("auto").width(1080).crop("fill")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", aspect_ratio: "9:16", gravity: "auto", width: 1080, crop: "fill")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("9:16").Gravity("auto").Width(1080).Crop("fill")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1080)
.aspectRatio("9:16")
	.gravity(
	Gravity.autoGravity())
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("9:16").setGravity("auto").setWidth(1080).setCrop("fill")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().aspectRatio("9:16").gravity("auto").width(1080).crop("fill")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.fill().width(1080)
.aspectRatio("9:16")
	.gravity(
	Gravity.autoGravity())
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 resize(Resize.fill() { width(1080)
 aspectRatio("9:16")
	 gravity(
	Gravity.autoGravity())
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {aspect_ratio: "9:16", gravity: "auto", width: 1080, crop: "fill"})
```

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

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  fill()
    .width(1080)
    .aspectRatio("9:16")
    .gravity(autoGravity())
);
```

> **NOTES**:
>
> * The first time you request a video with `g_auto`, Cloudinary needs time to analyze it, and the request returns an HTTP 423 error ("Video tracking-crop is pending") until it's ready. Try again after a short wait, or generate the video in advance with an [eager transformation](eager_and_incoming_transformations).

> * Cropping always removes part of the video, so it's best when the subject is small enough to fit in the new frame.

### Option 2: Keep the whole video, with a blurred background

To avoid cropping, fit the whole video inside the new frame with `c_pad`, and fill the leftover space with a blurred, enlarged copy of the video itself (`b_blurred:400:15`). The first number is the blur strength, and the second is the brightness (a lower value darkens the background).

This example places the video in the middle of a 1080x1920 (9:16) frame:

![Vertical 9:16 video with the original centered on a blurred background](https://res.cloudinary.com/demo/video/upload/b_blurred:400:15,c_pad,h_1920,w_1080/woman-walking-near-lake-jacket.mp4 "with_image:false")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {background: "blurred:400:15", height: 1920, width: 1080, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(blurred().intensity(400).brightness(15))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(blurred().intensity(400).brightness(15))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(blurred().intensity(400).brightness(15))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(blurred().intensity(400).brightness(15))
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(background="blurred:400:15", height=1920, width=1080, crop="pad")
```

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

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->resize(Resize::pad()->width(1080)
->height(1920)
	->background(
	Background::blurred()->intensity(400)
->brightness(15))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("blurred:400:15").height(1920).width(1080).crop("pad")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", background: "blurred:400:15", height: 1920, width: 1080, crop: "pad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("blurred:400:15").Height(1920).Width(1080).Crop("pad")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.pad().width(1080)
.height(1920)
	.background(
	Background.blurred().intensity(400)
.brightness(15))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("blurred:400:15").setHeight(1920).setWidth(1080).setCrop("pad")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().background("blurred:400:15").height(1920).width(1080).crop("pad")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.pad().width(1080)
.height(1920)
	.background(
	Background.blurred().intensity(400)
.brightness(15))
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 resize(Resize.pad() { width(1080)
 height(1920)
	 background(
	Background.blurred() { intensity(400)
 brightness(15) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {background: "blurred:400:15", height: 1920, width: 1080, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { blurred } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(blurred().intensity(400).brightness(15))
);
```

  
  

To get a square instead, change the dimensions to `h_1080,w_1080`.

> **NOTE**: A blurred background needs both the width and the height. With only an aspect ratio, such as `ar_9:16,b_blurred:400:15,c_pad,w_1080`, the request returns an HTTP 400 error.

### Option 3: Keep the whole video, with a solid color background

Replace `b_blurred:400:15` with a color, such as `b_rgb:e8a598`, to fill the leftover space with a solid color:

![Vertical 9:16 video with the original centered on a pink background](https://res.cloudinary.com/demo/video/upload/b_rgb:e8a598,c_pad,h_1920,w_1080/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_300")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {background: "#e8a598", height: 1920, width: 1080, crop: "pad"})
```

```react
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(color("#e8a598"))
);
```

```vue
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(color("#e8a598"))
);
```

```angular
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(color("#e8a598"))
);
```

```js
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(color("#e8a598"))
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(background="#e8a598", height=1920, width=1080, crop="pad")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Background;
use Cloudinary\Transformation\Color;

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->resize(Resize::pad()->width(1080)
->height(1920)
	->background(
	Background::color(Color::rgb("e8a598")))
	);
```

```java
cloudinary.url().transformation(new Transformation().background("#e8a598").height(1920).width(1080).crop("pad")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", background: "#e8a598", height: 1920, width: 1080, crop: "pad")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("#e8a598").Height(1920).Width(1080).Crop("pad")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.pad().width(1080)
.height(1920)
	.background(
	Background.color(Color.rgb("e8a598")))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("#e8a598").setHeight(1920).setWidth(1080).setCrop("pad")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().background("#e8a598").height(1920).width(1080).crop("pad")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.resize(Resize.pad().width(1080)
.height(1920)
	.background(
	Background.color(Color.rgb("e8a598")))
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 resize(Resize.pad() { width(1080)
 height(1920)
	 background(
	Background.color(Color.rgb("e8a598")))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {background: "#e8a598", height: 1920, width: 1080, crop: "pad"})
```

```react_native
import { pad } from "@cloudinary/url-gen/actions/resize";
import { color } from "@cloudinary/url-gen/qualifiers/background";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").resize(
  pad()
    .width(1080)
    .height(1920)
    .background(color("#e8a598"))
);
```

## Related topics

* [Video resize and crop modes](video_resize_modes)
* [Pad with a blurred video background](video_resize_modes#pad_with_blurred_video_background)
* [Video gravity for crops](video_gravity)
* [Social media videos](social_media_videos)