So machst du einen responsiven Video-iframe
Aktualisiert: 10. November 2026
Ein iframe mit width="560" height="315" sieht am Computer gut aus, auf dem Handy aber läuft er über oder wird winzig. Die Lösung: Er soll die ganze verfügbare Breite nutzen und seine Höhe aus dem Seitenverhältnis des Videos berechnen.
Der moderne Weg: aspect-ratio
width:100% lässt ihn seinen Container ausfüllen, und aspect-ratio berechnet die Höhe. Das funktioniert in allen aktuellen Browsern. Für vertikale Videos nutze 9/16 und begrenze die Breite (zum Beispiel max-width:360px).
<iframe src="https://dembed.cc/embed/v_DEINE_ID" title="Mein Video" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>Der klassische Trick (für sehr alte Browser)
56,25 % ist 9 ÷ 16: Der Container reserviert eine Höhe im Verhältnis zu seiner Breite, und der iframe füllt sie aus. Für 4:3 nutze 75 %, für 1:1 100 %.
<div style="position:relative;padding-top:56.25%">
<iframe src="https://dembed.cc/embed/v_DEINE_ID" title="Mein Video" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>Ohne Code zu schreiben
- 1Öffne den Generator für Einbettungscode und füge den Link deines Videos ein.
- 2Wähle das Seitenverhältnis (16:9, 4:3, 1:1 oder 9:16) und „Responsiv“ als Größe.
- 3Kopiere den Code und füge ihn auf deiner Website ein.
Häufige Fehler
- Feste width- und height-Werte am iframe zusätzlich zum style beibehalten: Entferne sie, sonst ignoriert der Browser womöglich den style.
- Ein Container mit fester Pixelbreite: Der iframe passt sich seinem Container an, also muss auch dieser flexibel sein.
- allowfullscreen vergessen: Dann funktioniert der Vollbild-Button nicht.
Häufige Fragen
Ja: Füge den Code in einen Block „Individuelles HTML“ ein.