Video in HTML einbetten: responsiver iframe Schritt für Schritt

Es gibt zwei Wege, ein Video in HTML einzufügen. Das <video>-Tag spielt eine Datei (zum Beispiel ein MP4) direkt von deinem Server ab: Das ist einfach, aber die Datei wird unverändert ausgeliefert, ohne adaptive Qualität oder Statistiken, und verbraucht das Datenvolumen deines Hostings.

Ein iframe bettet den Player eines Videodienstes ein. Die Datei liefert dieser Dienst aus, mit adaptiver Qualität, Untertiteln und Steuerelementen, und auf deiner Website fügst du nur eine Zeile Code ein. Das bieten YouTube, Vimeo oder Dembed als „Einbettungscode“ an.

Mit der CSS-Eigenschaft aspect-ratio, die alle modernen Browser unterstützen, füllt der iframe die verfügbare Breite und berechnet seine Höhe selbst, ohne zusätzliche Container:

<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; encrypted-media" allowfullscreen loading="lazy"></iframe>

Ist dein Theme alt oder entfernt der Editor Stile, nutze den Container-Trick: padding-top: 56.25% entspricht dem Seitenverhältnis 16:9 (9 ÷ 16). Dieses Format kopiert der Button „Responsiv“ im Dembed-Dashboard:

<div style="position:relative;width:100%;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; encrypted-media" allowfullscreen loading="lazy"></iframe></div>

• src: die Adresse des Players. Bei Dembed hat sie die Form https://dembed.cc/embed/ID.
• title: beschreibt das Video für Screenreader. Es ist eine Anforderung der Barrierefreiheit und hilft bei SEO.
• allow: die Berechtigungen des Players (Autoplay, Vollbild, Bild-in-Bild). Ohne sie funktionieren manche Buttons nicht.
• allowfullscreen: aktiviert den Vollbild-Button.
• loading="lazy": Der iframe lädt erst, wenn der Besucher in seine Nähe scrollt. Verbessert Geschwindigkeit und Core Web Vitals.
• style="border:0": entfernt den grauen Rahmen, den Browser standardmäßig um iframes zeichnen.

Browser erlauben Autoplay nur, wenn das Video stumm startet. Bei Dembed aktivierst du es, indem du ?autoplay=1 an die Einbettungsadresse anhängst.

Für vertikale Videos (Reels, Shorts, TikTok) stellst du das Seitenverhältnis auf 9/16 und begrenzt die Breite, damit es auf dem Desktop nicht den ganzen Bildschirm einnimmt:

<iframe src="https://dembed.cc/embed/v_DEINE_ID?autoplay=1" title="Mein vertikales Video" style="width:100%;max-width:360px;aspect-ratio:9/16;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen loading="lazy"></iframe>

• Eigenes HTML: dort einfügen, wo das Video erscheinen soll, innerhalb von <body>.
• WordPress: in einen Block „Individuelles HTML“ (wir haben eine Schritt-für-Schritt-Anleitung).
• Blogger: in der „HTML-Ansicht“ des Posts oder in einem HTML/JavaScript-Gadget.
• Wix, Webflow, Squarespace, Shopify und andere Baukästen: Hat deine Plattform einen Block „HTML“, „Einbetten“ oder „Eigener Code“, füge den iframe dort ein.

• Das Video erscheint nicht und hat die Höhe null: Das Seitenverhältnis fehlt. Nutze aspect-ratio oder den Container mit padding-top.
• „Blockierter Inhalt“ oder „gemischter Inhalt“: Deine Website läuft über https, der iframe über http. Verwende immer die https-Adresse.
• „Diese Website erlaubt keine Einbettung“: Manche Dienste blockieren iframes auf fremden Websites (Header X-Frame-Options oder frame-ancestors). Nutze den offiziellen Einbettungslink des Dienstes, nicht die normale Videoseite.
• Der Editor löscht den Code: Wechsle in die HTML-Ansicht oder nutze einen Block für individuelles HTML; visuelle Editoren entfernen manchmal iframes.