HTML-Video und Iframe-Embeds, die schnell laden

Builder für HTML-Video- und Iframe-Embeds

HTML-Video und Iframe: Autoplay, Untertitel, responsive Embeds | We.Inc

So nutzt du das video-Tag (autoplay, muted, playsinline, poster), fügst Untertitel mit track hinzu, baust ein Hero-Hintergrundvideo, bettest YouTube oder Vimeo responsiv und mit Lazy Loading ein, dazu ein Builder für Einbettungscode.

Für eigene Dateien verwendest du das video-Element: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. Autoplay funktioniert nur zusammen mit muted. Für YouTube oder Vimeo nutzt du ein iframe mit loading="lazy", einem title und aspect-ratio: 16 / 9 für responsive Größen. Der Builder unten schreibt dir beides.

Video-Attribute, die du brauchen wirst

Attribut
Wirkung

Zeigt die Steuerelemente des Browsers für Wiedergabe, Lautstärke und Vollbild

autoplay muted
Startet die Wiedergabe beim Laden; die meisten Browser verlangen dafür muted

Spielt auf dem iPhone innerhalb der Seite statt im Vollbild

Startet am Ende von vorn

Bild, das vor dem Start der Wiedergabe angezeigt wird

none, metadata oder auto: wie viel vorab geladen wird

Wähle im Embed-Builder eine Quelle, leg die Schalter um und kopiere Markup, das bereits die oft vergessenen Attribute enthält: playsinline für iPhones, einen title am iframe für Screenreader, YouTube im erweiterten Datenschutzmodus und eine 16:9-Box, die nie gestaucht wird. Die Abschnitte unten behandeln Untertitel, Hintergrundvideos, Sandboxing und eine Klick-zum-Laden-Fassade, die schwere Player aus dem ersten Rendern heraushält.

Wähle YouTube, Vimeo, eine selbst gehostete Datei oder eine beliebige andere iframe-URL.
Füge die Video-ID oder den Dateipfad ein und wähle Autoplay, Loop, Steuerelemente und Startzeit.
Lass Responsive und Lazy Loading eingeschaltet, sofern du keinen Grund dagegen hast.
Kopiere das Markup und füge es in deine Seite oder den HTML-Block deines Website-Baukastens ein.

Gib jedem iframe ein title-Attribut, das beschreibt, was es enthält. Screenreader lesen es vor, wenn Nutzer den Frame erreichen.
Setze preload="none" bei Videos weit unten auf der Seite, oder preload="metadata", wenn die Dauer angezeigt werden soll, ohne den Clip herunterzuladen.
Codiere Hintergrundvideos ohne Tonspur neu. Ein stummer Stream ist kleiner und macht die muted-Anforderung hinfällig.
Ein iframe mit loading="lazy", das bereits auf dem ersten Bildschirm liegt, lädt trotzdem sofort, daher ist das Attribut bei fast jedem Frame unbedenklich.
Biete bei Bewegung, die länger als fünf Sekunden läuft, immer Steuerelemente oder einen sichtbaren Pause-Button an, wie es WCAG 2.2.2 verlangt.

Häufige Fragen

Warum startet mein Video nicht automatisch?

Browser blockieren Autoplay mit Ton. Füge muted zusammen mit autoplay hinzu, dazu playsinline für iPhones. Datensparmodi und manche Nutzereinstellungen können es trotzdem blockieren, also gestalte die Seite so, dass sie auch nur mit dem Poster-Bild funktioniert.

Wie mache ich ein YouTube-Embed responsiv?

Entferne die festen Breiten- und Höhenangaben und gib dem iframe width: 100%; height: auto; aspect-ratio: 16 / 9. Die Eigenschaft aspect-ratio hält die Höhe bei jeder Bildschirmgröße passend zur Breite und ersetzt den alten Wrapper mit padding-bottom: 56.25%.

Was macht youtube-nocookie.com?

Das ist der erweiterte Datenschutzmodus von YouTube. Laut YouTube werden Wiedergabeinformationen erst dann zur Personalisierung des Surfens genutzt, wenn der Zuschauer das Video abspielt. Ansonsten funktioniert das Embed gleich; tausch einfach die Domain im src aus.

Was macht das sandbox-Attribut an einem iframe?

Ein leeres sandbox-Attribut wendet alle Einschränkungen an: keine Skripte, keine Formulare, keine Popups, keine Navigation der obersten Seite und ein eindeutiger Origin. Danach erlaubst du nur das wieder, was der Frame braucht, mit Tokens wie allow-scripts oder allow-forms. Kombiniere bei nicht vertrauenswürdigen Inhalten nicht allow-scripts mit allow-same-origin.

Wie füge ich einem Video Untertitel hinzu?

Schreib eine WebVTT-Datei mit zeitlich festgelegten Cues und füge <track kind="captions" src="captions.vtt" srclang="en" label="English" default> in das video-Element ein. Der Browser ergänzt seine Steuerelemente um ein Untertitelmenü. Die Datei muss vom selben Origin oder mit CORS ausgeliefert werden.

Warum eine Fassade besser ist als ein direktes Player-Embed

Ein YouTube- oder Vimeo-iframe lädt seine eigenen Skripte, Styles und Schriften, sobald es gerendert wird, noch bevor jemand auf Play drückt. Auf einer Seite mit mehreren Embeds trifft dieses Gewicht jeden Besucher, obwohl die meisten nie zuschauen.
Eine Fassade zeigt das Vorschaubild und einen Play-Button und tauscht erst beim Klick das echte iframe ein. Lighthouse führt dieses Muster in seinem Audit zu Fassaden für Drittanbieter auf. Der Code unten erledigt das in wenigen Zeilen ohne Bibliothek.

Ein Hero-Hintergrundvideo mit Verantwortung

Halte den Clip kurz, stumm und komprimiert, setze ein Poster, damit sofort etwas erscheint, und leg Text über eine dunkle Überlagerung, damit der Kontrast nicht vom Einzelbild abhängt. Blende das Video für Leser aus, die reduzierte Bewegung wünschen, und lass das Poster das Design tragen.

Das video-Element

Ein Produktclip mit Quellen und Poster

Der Browser spielt die erste Quelle ab, die er unterstützt, daher steht das kleinere, neuere Format zuerst. Der Absatz darin erscheint nur in Browsern ganz ohne Videounterstützung.

Untertitel mit track und WebVTT

Untertiteldateien einbinden

kind="captions" enthält Geräusche und Sprechernamen; kind="subtitles" ist für Übersetzungen gedacht. default schaltet die erste Spur ein.

Die Datei beginnt mit WEBVTT, gefolgt von Cues aus Start- und Endzeit und anschließendem Text. Liefere sie mit dem Content-Type text/vtt aus.

Hero-Hintergrundvideo mit Fallback

Stummes Hero-Video in Schleife mit Fallback für reduzierte Bewegung

Poster und Hero-Hintergrund teilen sich ein Bild, sodass der Hero-Bereich richtig aussieht, bevor das Video lädt und wenn es für reduzierte Bewegung ausgeblendet ist.

Wichtige iframe-Attribute

iframe-Attribute und wann du sie verwendest

Attribut
Beispiel
Zweck

title="Store location map"
Barrierefreier Name für den Frame

loading="lazy"
Verzögert Frames außerhalb des Bildschirms, bis der Nutzer in ihre Nähe scrollt

sandbox="allow-scripts allow-forms"
Schränkt ein, was die eingebettete Seite darf

allow="autoplay; fullscreen; picture-in-picture"
Gewährt dem Frame Browserfunktionen

Erlaubt dem Player den Vollbildmodus (ältere Entsprechung von allow="fullscreen")

referrerpolicy="strict-origin-when-cross-origin"
Begrenzt, was die eingebettete Website über die Seiten-URL erfährt

width / height
width="560" height="315"
Reserviert Platz vor dem Laden; mit CSS überschreiben

Responsives 16:9-YouTube-Embed

aspect-ratio hält den Frame bei jeder Breite in Form. Die nocookie-Domain ist der erweiterte Datenschutzmodus von YouTube.

Ein Widget eines Drittanbieters in der Sandbox

Nur Skripte und das Absenden von Formularen sind wieder erlaubt. Der Frame kann keine Popups öffnen und deine Seite nicht navigieren.

YouTube-Fassade mit Klick zum Laden

Erst das Vorschaubild, der Player beim Klick

Bis jemand klickt, lädt die Seite statt des vollständigen Players ein einziges Vorschaubild. Der Button hält es per Tastatur bedienbar.

Formate und Größenbudget

Videoformate fürs Web (prüfe auf caniuse die genauen Versionen, die dein Publikum nutzt)

Container und Codec
Unterstützung
Verwende es für

MP4, H.264-Video, AAC-Audio
Jeder aktuelle große Browser
Die sichere Standard- und Fallback-Quelle

WebM, VP9
Alle aktuellen großen Browser
Kleinere Dateien bei ähnlicher Qualität; vor MP4 aufführen

MP4 oder WebM, AV1
Neuere Versionen der großen Browser; auf caniuse prüfen
Kleinste Dateien, langsamer zu codieren

Animiertes GIF
Überall
Vermeiden für alles, was länger als ein bis zwei Sekunden ist; ein stummes MP4 ist viel kleiner

Einen Hero-Clip mit ffmpeg komprimieren

Unsere Zielwerte: 720p oder 1080p, kein Ton, unter zehn Sekunden und höchstens ein paar Megabyte. -an entfernt den Ton, -movflags +faststart lässt die Wiedergabe beginnen, bevor die Datei fertig heruntergeladen ist.

Videodatei

Anderes iframe

Builder für Einbettungscode

Quelle

Video-ID oder URL

Pfad der Videodatei

iframe-URL

Titel (wird von Screenreadern vorgelesen)

Poster-Bild (optional)

Start bei (Sekunden)

Autoplay (stumm)

Schleife

Steuerelemente

Nicht tracken (dnt=1)

Erweiterter Datenschutz (nocookie)

Lazy Loading

Responsiv 16:9

Sandbox

Automatisch abspielende Bewegung ohne Steuerelemente: Füge einen eigenen Pause-Button hinzu, damit Besucher sie stoppen können.

Markup

Code kopieren

Produkt-Rundgang

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap