> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Auto Height Adjustment

Automatically resize any embedded iFrame to fit its content in Elementor and Gutenberg using the Custom iFrame WordPress plugin.


## Overview

Custom iFrame Auto Height automatically adjusts the height of any embedded iFrame to match its content. This prevents white space below short content and cutoffs for tall content.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Auto Height is a free feature. No Pro plan required.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with Elementor or the Gutenberg block editor

## When to Use Auto Height

Enable Auto Height when embedding content with a variable or unknown height:

- **Forms:** HubSpot, Typeform, JotForm, and Calendly change height based on step count
- **Documents:** Google Docs and Google Sheets scroll to fit content length
- **Web pages:** External pages vary in content length
- **Calendars:** Google Calendar changes height based on visible events

Use a fixed height for content with a consistent, predictable height such as YouTube videos, Spotify players, and Google Maps.

## How to Enable Auto Height

### In Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame widget. Click **Edit with Elementor**.
  </Step>
  <Step title="Select the Custom iFrame widget" icon="mouse-pointer" title-type="p">
    Click the widget to open its settings in the left panel.
  </Step>
  <Step title="Enable Auto Height" icon="toggle-right" title-type="p">
    In the **Content** tab, find the **Auto Height** toggle. Set it to **Yes**. The fixed height field disappears and the iFrame resizes to its content.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The iFrame now adjusts its height automatically on the live page.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame block. Click **Edit**.
  </Step>
  <Step title="Select the Custom iFrame block" icon="mouse-pointer" title-type="p">
    Click the block to open its settings in the right panel.
  </Step>
  <Step title="Enable Auto Height" icon="toggle-right" title-type="p">
    In the block settings panel, find the **Auto Height** toggle and turn it on. The fixed height field is replaced by automatic sizing.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The iFrame adjusts to its content on the live page.
  </Step>
</Steps>

<Callout kind="success">
  Auto Height is active. The iFrame resizes to fit its content on every page load.
</Callout>

## How Auto Height Works

Custom iFrame listens for messages from the embedded page using the browser's `postMessage` API. When the embedded content reports its own height, the iFrame resizes to match. This requires the embedded page to send height signals.

<Callout kind="alert">
  Auto Height works best with same-domain content or embeds designed to send postMessage height events. Some external sites do not emit height signals. For those, set a fixed height manually.
</Callout>

## Fixed Height vs. Auto Height

| Situation | Recommendation |
|---|---|
| YouTube video | Fixed height (e.g., 450px) |
| Google Map | Fixed height (e.g., 400px) |
| Typeform or HubSpot form | Auto Height |
| Google Docs or Sheets | Auto Height |
| External website | Fixed height (most cases) |
| Calendly booking page | Auto Height |

## FAQ

<ExpandableGroup>
  <Expandable title="Does Auto Height work for all embeds?" default-open="false">
    No. Auto Height requires the embedded page to send height information via postMessage. Content on the same domain or embeds designed for iFrame use (like Typeform and HubSpot) support this. Most external websites do not.
  </Expandable>
  <Expandable title="My form is still cut off with Auto Height enabled. Why?" default-open="false">
    The embedded form may not be sending height events to the parent page. Try setting a tall fixed height instead, or contact the form provider to confirm iFrame height messaging is supported.
  </Expandable>
  <Expandable title="Can I use Auto Height and a fixed height at the same time?" default-open="false">
    No. Enabling Auto Height disables the fixed height field. Switch between them by toggling Auto Height off and entering a fixed value.
  </Expandable>
  <Expandable title="Does Auto Height affect page performance?" default-open="false">
    No. Auto Height uses a lightweight postMessage listener. It does not trigger additional network requests or affect Core Web Vitals scores.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Lazy Loading (Smart Load)](/features/lazy-loading)
- [Placeholder Image](/features/placeholder-image)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)