Dynamically resizing embedded content

Some embedded content needs to adjust its height dynamically based on what is inside, like expanding comments, widgets, or responsive layouts. These embeds require a different approach.

You cannot change an iframe's size from inside it because of the browser restrictions. Changing iframe size can only be done by the parent page. Because of this, you will need to include a small JavaScript to embed on the hosting page to help you resize your iframe.

Here is how it works:

• The iframe calculates the required height when it loads or when the content resizes.

• Iframe sends that height to the parent page as a message using window.postMessage() method.

• Your script on the parent page listens for that message and updates your iframe's size accordingly.

Please take a look at this open-source implementation for your reference.

This setup requires full HTML for the embed, including a <script> tag. The only way to pass full HTML to Iframely is via the oEmbed format. It works similarly to the Iframely <link> tag, but instead of linking to an iframe URL, you link to your JSON endpoint. That endpoint should return an HTML field that contains both the iframe and the script needed for resizing.