Back to all features
Open for signals

Responsive iframes

The frame-sizing CSS property sets the size of an <iframe> element to that of it contents, to avoid scrolling in the iframe. Embedded documents allow this with the <meta name="responsive-embedded-sizing"> element and request resizing in the embedding page by calling window.requestResize().

Community use cases (1)

What I want to do with this feature

I help maintain a project called "Playful Programming", a dev-ed non-profit. We have a blog / CMS platform that we want to enable people to leave embeddable interactive examples to. Think "A button that demos A11Y differences, encouraging users to try things with their screen-reader" inside of an article that should look/feel like it's embedded in an article naturally.

What I'm having to do in the meantime

Having to use some JS hackery to resize the iframe after-the-fact. This works for now since it's same-domain:

<iframe id="myIframe" src="your-content.html" onload="resizeIframe(this)" style="width: 100%; border: none;"></iframe>

<script>
function resizeIframe(iframe) {
  // Reset height first to handle content shrinking
  iframe.style.height = ""; 
  // Set new height based on the internal content's height
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

But won't work once we move the iframe src's to an assets domain later.