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
- 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
Open your page in Elementor
Go to the page with the Custom iFrame widget. Click Edit with Elementor.
Select the Custom iFrame widget
Click the widget to open its settings in the left panel.
Enable Auto Height
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.
Publish
Click Update or Publish. The iFrame now adjusts its height automatically on the live page.
In Gutenberg
Open your page in the block editor
Go to the page with the Custom iFrame block. Click Edit.
Select the Custom iFrame block
Click the block to open its settings in the right panel.
Enable Auto Height
In the block settings panel, find the Auto Height toggle and turn it on. The fixed height field is replaced by automatic sizing.
Publish
Click Update or Publish. The iFrame adjusts to its content on the live page.
Auto Height is active. The iFrame resizes to fit its content on every page load.
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.
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.
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
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.
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.
No. Enabling Auto Height disables the fixed height field. Switch between them by toggling Auto Height off and entering a fixed value.
No. Auto Height uses a lightweight postMessage listener. It does not trigger additional network requests or affect Core Web Vitals scores.
Related Guides
Last updated 1 day ago
Built with Documentation.AI