<meta name="responsive-embedded-sizing">

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The responsive-embedded-sizing value for the name attribute of a <meta> element opts in a document embedded in an <iframe> to sharing its size information with the parent document. The frame can then be sized relative to its contained document's layout size using the frame-sizing CSS property.

Description

For security and privacy reasons, <iframe> elements do not by default expose any information to the parent document about the size of the content in the document they are embedding.

To enable responsive sizing of <iframe> elements based on their content, the <meta name="responsive-embedded-sizing"> tag can be included in an embedded document to opt it in to sharing its size information with the parent document.

The frame-sizing CSS property can then be set on the <iframe> to cause it to adopt the same horizontal or vertical size as the embedded document's actual content size (termed the internal layout intrinsic size in the spec, but abbreviated to "layout size" in our documentation). This allows <iframe> content to fit seamlessly into the embedding element and avoid unnecessary scrollbars.

To resize the <iframe> dynamically as the embedded document changes layout size, you can call the Window.requestResize() method from the embedded document to make it report an updated size.