Das iframe-Embed-Element steht ab dem Business-Tarif zur Verfügung.


Standardmäßig wird die Größe eines iframe-Embed-Elements über das Seitenverhältnis in den Einstellungen des Elements festgelegt. Alternativ kannst du Dynamische Höhe aktivieren, sodass sich das Element automatisch an den Inhalt des iframes anpasst.


Für selbst gehostete Inhalte muss ein individuelles Skript in die eingebettete Seite eingefügt werden, damit die richtige Höhe bestimmt werden kann. Bei Drittanbieter-Plattformen wie Flourish oder Infogram ist die dynamische Größenanpassung in der Regel bereits integriert. Um dies für Flourish-Embeds zu aktivieren, hänge ?auto=1 an die Flourish-URL an.


Dynamische Höhe aktivieren


Schritt 1: Dynamische Höhe im Editor aktivieren

Aktiviere die Option Dynamische Höhe in den Einstellungen des iframe-Embed-Elements.


Schritt 2: Skript in die eingebettete Seite einfügen

Falls du selbst gehostete Inhalte einbindest, füge folgendes Skript in den HTML-Code der eingebetteten Seite ein, um die Höhenanpassung zu ermöglichen:


<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>