> 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="" %} ### 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="" %} ### 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
Standardizing Screen Captures 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.
Removing Unwanted Screen Areas 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.
Optimizing for Embed Dimensions 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.
Fixing Inconsistent Slide Sizes 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.
*** > ✨ **The Result:** A consistent, polished demo with uniform cropping and proper media alignment — done in seconds, not minutes. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.supademo.com/customize/manage-content-and-layout/crop-media.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.