Iframe Autoheight

Some embedded pages know how tall they are and say so, posting their content height to the page that frames them. Drupal has no way to listen. The iframe is stuck at whatever fixed height the field was given, so a tall embed gets its own scrollbar inside your page and a short one leaves an empty gap below it.

This module listens. It extends the Iframe field with an allowlist of trusted origins, and any iframe field whose source matches one of them is resized to the height it reports, as often as it reports it. The result is a single page scroll instead of a scrollbar nested inside another.

Nothing is injected into the embedded document. This module is the receiving half only, so it works with embeds you do not control, as long as the provider already posts its height.

Features

• Resizes an Iframe field to the content height its embed reports, growing and shrinking as the content changes.
• Per-origin allowlist. An iframe is only ever resized by the document it actually loaded, verified on both the message origin and the sending window, so no other page can resize your embeds.
• No JavaScript library is added to the embedded document, and none is required there beyond the messages it already sends.
• Optional scroll assist: an embed that walks the user through steps can ask for the top of the iframe to be brought back into view when the step changes.
• Until the first message arrives the iframe keeps the height its field defines, so nothing jumps on page load.
• The script and its settings are only added to pages that actually render an Iframe field.

Typical use cases are third party wizards, questionnaires, calculators, booking flows and configurators, that is any embed whose height changes as the visitor moves through it.

Post-Installation

Go to Configuration › Media › Iframe autoheight (/admin/config/media/iframe-autoheight) and add one row per embed.

Each row takes two values:

• Origin: the scheme and domain the embed is served from, for example https://www.example.com. Nothing after the domain, because that is all a browser reports when it delivers a message.
• Message prefix: the namespace the embed puts on the messages it posts. A prefix of example means the embed sends example:iframe-height. You cannot choose this freely, it has to be the one the embed already sends, so ask the provider. A wrong prefix fails silently: the embed simply never resizes.

There is nothing else to configure. No new content type, no text format change, and no per-field setting: every Iframe field on the site whose source matches a configured origin is handled, whichever formatter it uses. Every other iframe keeps the height its field defines.

For embed providers, the contract is two messages posted to window.parent:

• { type: '<prefix>:iframe-height', height: <pixels> } sets the iframe height. height must be a positive number.
• { type: '<prefix>:step-change' } scrolls the top of the iframe into view, and only when the visitor has already scrolled past it.

Additional Requirements

Iframe, which provides the field type this module extends. No external libraries and no Composer dependencies beyond that.

Recommended modules/libraries

None. The module is self contained once Iframe is installed.

Similar projects

iFrame Resizer solves the same problem from the other end: it ships the iframe-resizer JavaScript library, which has to run inside the embedded document as well as in the parent. That gives you more features, including in-page links and nested iframes, but it only works when you control the embedded page or the provider agrees to load the library. It is also not tied to the Iframe field, so it can target any iframe on the page.

Use iFrame Resizer when you own both sides. Use this module when you own only the Drupal side and the embed already reports its height in its own format.