By default, the size of an iframe embed element is determined by selecting an aspect ratio in the element's settings. Alternatively, you can enable Dynamic Height to adjust the iframe size automatically based on its content.
For self-hosted content, you’ll need to add a custom script to the embedded page to ensure it requests the correct height. If you're embedding third-party content from platforms like Flourish or Infogram, dynamic resizing is usually supported by default. To enable this for Flourish embeds, append ?auto=1 to the Flourish URL.
Enabling Dynamic Height
Step 1: Activate Dynamic Height in the Editor
In the settings of your iframe embed element, enable the Dynamic Height option.
Step 2: Add a Custom Script to Your Embedded Page
If you're embedding self-hosted content, include the following script in the HTML of the embedded page to enable height adjustments:
<script>
var container = document.documentElement;
var previousHeight = 0;
new ResizeObserver(function() {
var newHeight = container.offsetHeight;
if (previousHeight !== newHeight) {
previousHeight = newHeight;
window.parent.postMessage(
JSON.stringify({
src: window.location.toString(),
context: "iframe.resize",
height: newHeight
}),
"*"
);
}
}).observe(container);
</script>