<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 an embedded document to sharing its size information with the parent page. The embedding <iframe> can then be sized relative to the embedded content'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 page about the size of the content 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 page.
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 content's actual content size (termed the internal layout intrinsic size in the spec, but abbreviated to "layout size" in our documentation). This is useful for avoiding scrollbars on embedded content so that it fits more seamlessly with its embedder.
To resize the <iframe> dynamically as the embedded content changes size, you can call the Window.requestResize() method from the embedded page to make it report an updated size.
Examples
See the frame-sizing and Window.requestResize() pages for complete examples.
Specifications
This feature does not appear to be defined in any specification.Browser compatibility
See also
Window.requestResize()frame-sizingCSS property- CSS box sizing module