Embedding and web termsUpdated
Auto-resizing iframe
Also called: responsive iframe height, iframe resize, postMessage resize
Definition
An auto-resizing iframe changes its height to match the content inside it, so there's no inner scrollbar or empty gap. Because a page can't measure a cross-origin frame's content, the frame reports its height with postMessage and a script on the host page applies it.
Why iframes don't size themselves
An iframe's height is whatever the host page sets. The content inside keeps changing: text wraps differently on a phone, images finish loading, a “more” link expands. Because the frame comes from another domain, the host page isn't allowed to look inside and measure it. A fixed height either cuts the content off or leaves blank space below it.
How the handshake works
MDN is blunt about step three: always verify the sender's origin, and the message's contents, before acting on it. A frame embedded on many unknown sites can't know the host's origin in advance, so it should only send harmless data like a height.
- 1
The host listens
A script on your page creates the iframe and listens for message events.
- 2
The frame measures itself
Inside the frame, the page watches its own height and sends it to the parent window with postMessage whenever it changes.
- 3
The host checks the sender
It ignores any message whose origin isn't the embed's domain, whose source isn't one of its frames, or whose data isn't the expected shape.
- 4
The host sets the height
It applies the reported number to that iframe's style.
In practice
LinkedInEmbed's script snippet works this way: the frame reports its height, and the loader accepts the message only from LinkedInEmbed's origin, for one of its own frames, with a numeric height. LinkedIn's own post embed doesn't report its height, so it keeps the size you give it.
Where scripts aren't allowed you're back to a fixed height, which is the main trade-off covered in script or iframe embed code.
Related terms
- iframe
- An iframe (inline frame) is an HTML element, <iframe>, that displays a separate web page inside the current one. The embedded page loads from its own address and runs as its own document, kept apart from the host page's styles and scripts.
- Cumulative Layout Shift (CLS)
- Cumulative Layout Shift (CLS) is a Core Web Vitals metric for visual stability: it measures how much visible content moves unexpectedly while a page is open. web.dev rates a score of 0.1 or less as good and anything above 0.25 as poor.
- Script tag (async and defer)
- A script tag, <script>, adds JavaScript to a web page. By default an external script pauses HTML parsing while it downloads and runs; the async and defer attributes let the browser keep parsing and run the script later.
- Embed code
- Embed code is a snippet of HTML you paste into a web page to display content hosted somewhere else, such as a video, a social media post or a widget. It's usually an iframe tag, a script tag with a placeholder element, or a combination.
Show your LinkedIn on your website
Paste a LinkedIn URL and embed it with one snippet. Free plan, no credit card.
Put your LinkedIn on your website today
Create your first widget in about two minutes. Free plan, no credit card required.