> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/customize/manage-content-and-layout/crop-media.md).

# Crop Media

{% hint style="warning" %}
In cases where the aspect ratio or resolution differs between multiple slides, Supademo will use the aspect ratio (i.e. 1920x1080; 1.78:1) of the first slide to determine the remainder of the slides.\
\
To ensure consistency in the fit of each slide, we recommend using the same aspect ratio, which you can see when you hover over Upload Image/Video. You can also use the **Crop or Alignment functions below** to resize or align subsequent slides as desired.
{% endhint %}

***

## Crop Tool

Use the built-in crop tool to resize a specific image or video-based slide. By default, the editor will enforce your current Supademo's aspect ratio to ensure consistency.

{% @supademo/embed demoId="cmb11q51l1fgwppkpkm1umz6y" url="<https://app.supademo.com/demo/cmb11q51l1fgwppkpkm1umz6y>" %}

### How to Crop

1. **Choose a step** you want to crop.
2. Click on **"Blur & Annotate"** from the editor toolbar.
3. Select **"Crop Media"** to enter crop mode. Alternatively, you can click "**Resize & Crop**" at the bottom.
4. **Crop the step** to your desired aspect ratio.
5. Click **Save** to apply the crop.

***

## Bulk Crop (Apply to Other Steps)

Instead of cropping each step individually, you can crop one step and instantly apply that same crop to all other steps in your demo.

{% @supademo/embed demoId="cmmazxkuc00lq22c4wzf8mvsm" url="<https://app.supademo.com/demo/cmmazxkuc00lq22c4wzf8mvsm>" %}

### How to Use Bulk Crop

1. **Choose a step** you want to crop.
2. Click on **"Blur & Annotate"** from the editor toolbar.
3. Select **"Crop Media"** to enter crop mode. Alternatively, you can click "**Resize & Crop**" at the bottom.
4. **Crop the step** to your desired aspect ratio.
5. **Hover on the Save button** — you'll see the option **"Apply to other steps"**.
6. Click on it and **select the steps** from the left panel to which you want to apply the crop.
7. Use **Ctrl/Cmd + A** to quickly select all steps, or manually pick specific ones.
8. Click **Confirm** to apply the crop across selected steps.

{% hint style="success" icon="lightbulb" %}
**Tip:** This changes the aspect ratio of all selected steps at once, giving your demo a uniform, polished look.
{% endhint %}

***

## Media Fit Mode

The Crop Media modal also includes an **Alignment** tab where you can adjust the media fit mode. This helps fix inconsistent widths, aspect ratios, or resolutions between slides to reduce distortion.

Choose from two different fit modes:

* **Cover** — Expands the current video or image slide to cover the entire Supademo frame.
* **Contain** — Fits the entire video or image slide within the confines of the Supademo frame.

### How to Change Media Fit

1. **Choose a step** you want to adjust.
2. Click on **"Blur & Annotate"** from the editor toolbar.
3. Select **"Crop Media"** to open the modal.
4. Click on the **Alignment** tab.
5. Choose **Cover** or **Contain** based on your preference.
6. Click **Save** to apply.

***

## Benefits

* **Bulk editing** — Apply the same aspect ratio to all steps in one action.
* **Visual consistency** — A uniform aspect ratio across every step makes your demo look cleaner and more professional.
* **Save time** — No need to crop each step individually; do it once and apply everywhere.
* **Flexible selection** — Choose specific steps or apply to all with a simple keyboard shortcut.
* **Fix distortion** — Use Cover or Contain modes to handle inconsistent slide dimensions.

***

## Use Cases

<details>

<summary><strong>Standardizing Screen Captures</strong></summary>

Recorded your demo at different zoom levels or window sizes? Use Bulk Crop to bring every step to the same dimensions, creating a seamless viewing experience throughout your demo.

</details>

<details>

<summary><strong>Removing Unwanted Screen Areas</strong></summary>

Need to crop out browser toolbars, bookmarks, or sensitive tabs from your demo? Crop once to focus on the product area, then apply the same crop to all steps instantly.

</details>

<details>

<summary><strong>Optimizing for Embed Dimensions</strong></summary>

Embedding your demo on a landing page or help center with specific dimension requirements? Crop your demo to fit the target aspect ratio and apply it across all steps for a perfect embed.

</details>

<details>

<summary><strong>Fixing Inconsistent Slide Sizes</strong></summary>

Added new slides via recording or uploads that don't match your existing aspect ratio? Use Media Fit (Cover or Contain) to align them without distortion or cut-off issues.

</details>

***

> ✨ **The Result:** A consistent, polished demo with uniform cropping and proper media alignment — done in seconds, not minutes.