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

# Resize & Aspect Ratio

> Set exact video dimensions or force an aspect ratio for any player or platform.

Resize a video to exact dimensions or force a specific aspect ratio by adding `w_`, `h_`, and `ar_` tokens to the URL. Autorender rounds dimensions to even values for codec compatibility.

<Info>
  These tokens behave the same for images. See the shared [resize and aspect ratio](/docs/transformations/resize-and-aspect-ratio) page for the image reference.
</Info>

## How do width and height work?

Set the output width to **400 px** (`w_400`) and height with `h_`. If you provide only one dimension, Autorender calculates the other to preserve the source proportions.

| Token   | Range         | What it does                     |
| ------- | ------------- | -------------------------------- |
| `w_{n}` | `1` to `4320` | Sets the output width in pixels  |
| `h_{n}` | `1` to `4320` | Sets the output height in pixels |

<Tabs>
  <Tab title="Original (16:9)">
    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>

  <Tab title="Resized (w_400)">
    ```bash theme={null}
    https://assets.autorender.io/LOKVTtKVGb/w_400/doc/skateboarding.mp4
    ```

    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/w_400/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>
</Tabs>

## How to force an aspect ratio?

Add `ar_` to fix the output proportions regardless of the source ratio. Common ratios: `ar_1:1` for social feeds, `ar_16:9` for landscape, `ar_9:16` for vertical, `ar_4:5` for portrait.

<Tabs>
  <Tab title="Original (16:9)">
    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>

  <Tab title="Square (ar_1:1)">
    ```bash theme={null}
    https://assets.autorender.io/LOKVTtKVGb/w_400,ar_1:1/doc/skateboarding.mp4
    ```

    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/w_400,ar_1:1/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>
</Tabs>

We recommend setting `ar_` whenever a layout expects a fixed shape (e.g. `ar_1:1` for a square card) so the video stays correctly proportioned across devices.

## How does the video fill the box?

The fit mode controls what happens when the source ratio does not match the target box:

* `cm_pad_resize` resizes the video to fit inside the box and adds padding to fill the empty space.
* `cm_extract` crops the video to fill the exact box.

When you use `cm_pad_resize`, set the padding color with `bg_`.

| Token        | Values            | What it does                                  |
| ------------ | ----------------- | --------------------------------------------- |
| `bg_{color}` | `white`, `000000` | Sets the padding color as a name or hex value |

<Tabs>
  <Tab title="Original (16:9)">
    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>

  <Tab title="Padded (400x400)">
    ```bash theme={null}
    https://assets.autorender.io/LOKVTtKVGb/w_400,h_400,cm_pad_resize,bg_white/doc/skateboarding.mp4
    ```

    <div className="flex object-contain justify-center mt-4">
      <video src="https://assets.autorender.io/LOKVTtKVGb/w_400,h_400,cm_pad_resize,bg_white/doc/skateboarding.mp4" controls className="shadow-lg max-w-full" />
    </div>
  </Tab>
</Tabs>

<Warning>
  Width and height are rounded to even values before encoding, because common video codecs require even dimensions. Smaller dimensions render faster and cost less bandwidth.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Pad resize" icon="border-none" iconType="solid" href="/docs/video/pad-resize">
    Fit a video into a fixed box with a padding color.
  </Card>

  <Card title="Rotate" icon="rotate" iconType="solid" href="/docs/video/rotate">
    Reorient a video by 90, 180, or 270 degrees.
  </Card>

  <Card title="Image resize" icon="crop-simple" iconType="solid" href="/docs/transformations/resize-and-aspect-ratio">
    The same resize tokens applied to images.
  </Card>

  <Card title="Video overview" icon="clapperboard" iconType="solid" href="/docs/video/introduction">
    Every video transform token in one reference.
  </Card>
</CardGroup>