Die Fragen, die nach dem Einfügen des Codes kommen: Höhe, Breite, Transparenz, Plattformen.
Wie ändere ich die Größe des Countdown-iframes?
Ein iframe übernimmt die Höhe seines Inhalts nicht von selbst: Du legst sie fest. Der bereitgestellte Code nutzt width="100%" und height="500": Die Breite folgt deiner Spalte, die Höhe ist fest. Rechne mit 300 bis 380 px, wenn Titel, Beschreibung und Datum ausgeblendet sind, mit 450 bis 500 px mit allem, und etwas mehr auf dem Handy, wo der Text umbricht. Der Countdown zentriert sich in der verfügbaren Höhe: Ist das iframe zu hoch, bleibt Leerraum; ist es zu niedrig, wird die Beschreibung abgeschnitten.
Für eine andere Höhe auf dem Handy gib dem iframe eine Klasse:
<style>
.wiu-countdown { width: 100%; height: 480px; border: 0; }
@media (max-width: 600px) { .wiu-countdown { height: 560px; } }
</style>
<iframe class="wiu-countdown" src="https://www.watchisup.de/ereignis/dein-countdown/embed" title="Countdown" loading="lazy"></iframe>
Automatische iframe-Höhe (Pro)
Mit der Profi-Einbindung fügt der Code aus dem Einbetten-Fenster unter dem iframe eine Skriptzeile hinzu. Das Widget meldet dann die Höhe seines Inhalts, und das iframe passt sich von selbst an: kein Leerraum, keine abgeschnittene Beschreibung, auf dem Computer wie auf dem Handy, und die Höhe folgt, wenn die Live-Leiste erscheint. Füge die Zeile einmal pro Seite ein, auch bei mehreren Widgets.
Das funktioniert überall, wo man ein Skript einfügen kann: WordPress (Block „Individuelles HTML“), Squarespace, Webflow, Shopify, eine selbst gebaute Website. Notion und Google Sites entfernen Skripte, und Wix packt eingefügten Code in einen eigenen Rahmen: Dort behält das iframe die Höhe seines height-Attributs.
<iframe src="https://www.watchisup.de/ereignis/dein-countdown/embed?live=1" width="100%" height="500" frameborder="0"
title="Countdown" loading="lazy"></iframe>
<script src="https://www.watchisup.de/embed.js" async></script>
Wie zentriere ich das Widget und begrenze seine Breite?
Auf einer breiten Seite ist ein über die ganze Breite gezogener Countdown schlechter lesbar. Begrenze die Breite und zentriere ihn:
<iframe src="https://www.watchisup.de/ereignis/dein-countdown/embed" width="100%" height="420"
style="display:block; max-width:720px; margin:0 auto; border:0;"
title="Countdown" loading="lazy"></iframe>
Wie mache ich den Hintergrund transparent?
Mit der Profi-Einbindung fügst du der Adresse bg=transparent hinzu: Der Hintergrund deiner Website erscheint hinter den Ziffern. Im iframe verhindern allowtransparency und background:transparent in manchen Browsern einen weißen Hintergrund. Wähle dann eine Textfarbe, die auf deinem Hintergrund gut lesbar ist (Parameter text).
<iframe src="https://www.watchisup.de/ereignis/dein-countdown/embed?bg=transparent&live=1&hide=description"
width="100%" height="420" frameborder="0" allowtransparency="true"
style="background:transparent; border:0;" title="Countdown" loading="lazy"></iframe>
Wie binde ich es ein, ohne die Seite zu verlangsamen?
Ergänze loading="lazy": Der Browser lädt das Widget erst, wenn es sich dem Bildschirm nähert – ideal für einen Countdown weiter unten auf der Seite. Füge außerdem ein title-Attribut hinzu, das den Countdown beschreibt: Das lesen Screenreader vor.
<iframe src="https://www.watchisup.de/ereignis/dein-countdown/embed" width="100%" height="480" frameborder="0"
loading="lazy" title="Countdown to …"></iframe>
Auf welcher Plattform füge ich den Code ein?
Überall, wo man HTML oder eine einzubettende Adresse einfügen kann. Der vollständige Code (das iframe) kommt in einen HTML-Block; Tools, die nur eine URL verlangen, nehmen den Einbettungslink, der auf /embed endet.
- WordPress
- Block „Individuelles HTML“ im Editor oder ein HTML-Widget in der Seitenleiste.
- Notion
- Tippe /embed und füge den Einbettungslink ein, der auf /embed endet.
- Wix
- Hinzufügen > Code einbetten > HTML einbetten, dann das iframe einfügen.
- Squarespace
- Einen Code-Block hinzufügen und das iframe einfügen.
- Webflow
- Ein Embed-Element hinzufügen und das iframe einfügen.
- Shopify
- Abschnitt „Benutzerdefiniertes Liquid“ im Theme, iframe einfügen.
- Google Sites
- Einfügen > Einbetten > Über URL, Einbettungslink einfügen.
- Jimdo, Framer, Carrd…
- HTML- oder Embed-Block: das iframe einfügen.
Wie ändere ich das Datum, ohne den Code neu einzufügen?
Öffne deinen Bearbeitungslink und ändere Datum oder Titel: Das Widget ist auf allen Websites aktuell, die es zeigen. Der iframe-Code selbst bleibt gleich.
Ist der Countdown in jeder Zeitzone korrekt?
Ja. Der Countdown zielt auf einen exakten Zeitpunkt: Er erreicht für alle Besucher gleichzeitig null, egal wo sie sind, Zeitumstellung inklusive. Das Datum unter dem Titel wird in der Zeitzone des Ereignisses angezeigt.