This guide covers Meta Name: responsive-embedded-sizing (Experimental). An embedded document can opt in to reporting intrinsic size to an embedding parent for newer iframe sizing features.
Not every new browser feature is ready for every site. It helps to understand the problem first, then check whether the feature is mature enough before you depend on it.
How it is intended to work
An embedded document can opt in to reporting intrinsic size to an embedding parent for newer iframe sizing features.
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="responsive-embedded-sizing">
<title>Embedded card</title>
</head>
<body>
<article><h1>Card details</h1><p>Short explanation.</p></article>
</body>
</html>
What you should notice
This is experimental and requires compatible browser support plus corresponding parent iframe styling; the meta tag alone does not resize the iframe in older browsers.
Read the exact attribute and value shown in the code. That is the feature being demonstrated; the surrounding document merely provides the context required for valid HTML. Where JavaScript or CSS is involved, the complete working effect may need more than the markup shown.
How to test compatibility
- Create a plain HTML page with working essential content.
- Add the experimental feature as an enhancement, not as the only way to reach important information.
- Test in the latest browsers relevant to your audience, including keyboard and mobile use.
- Turn the feature off or use an older browser to confirm the fallback remains useful.
Common Beginner Mistakes
- This is experimental and requires compatible browser support plus corresponding parent iframe styling; the meta tag alone does not resize the iframe in older browsers.
- Assuming a feature supported in a technical preview works for every visitor.
- Removing native accessible behavior before the replacement is proven.
Key Takeaways
- An embedded document can opt in to reporting intrinsic size to an embedding parent for newer iframe sizing features.
- This is experimental and requires compatible browser support plus corresponding parent iframe styling; the meta tag alone does not resize the iframe in older browsers.
- Keep a safe baseline and make new browser capabilities optional whenever possible.