New in Chrome 154: iframes that automatically resize themselves to their content

~ Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comment widgets, varying-height social media embeds, or any other type of embed that uses an <iframe>. ~ To make this work there is a two-way opt-in: The embedder (e.g. index.html) needs to set the frame-sizing CSS property with a value of content-height (or content-width) on the iframe. The document loaded in the <iframe> (e.g. iframe.html) needs to include a meta tag to indicate that it’s OK to communicate its size the parent embedder. In code: /* In styles.css for index.html */ iframe { frame-sizing: content-height; width: 100%; } <!-- In the iframe.html’s head --> <meta name="responsive-embedded-sizing" content="allow-origins=*"> The content’s size is communicated from the embedded document after page load. To communicate a new size, the document in the frame must call…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town