HTML ändern · Anleitung

HTML: Video einfügen — YouTube, Vimeo und eigene Datei

YouTube einbetten

Die Zeile zum Kopieren

<iframe
  src="https://www.youtube-nocookie.com/embed/DEINE_VIDEO_ID"
  title="Beschreibung des Videos"
  allowfullscreen
  loading="lazy"></iframe>

Wo du die Video-ID findest: Öffne das Video auf YouTube und schau in die Adresszeile. Dort steht:

https://www.youtube.com/watch?v=dQw4w9WgXcQ

Der Teil hinter v= — hier dQw4w9WgXcQ — ist die ID. Etwa elf Zeichen aus Buchstaben, Zahlen, Bindestrichen und Unterstrichen.

Der Fehler, der fast allen passiert: Den normalen watch?v=-Link direkt ins src zu schreiben. Das ergibt einen leeren oder fehlerhaften Rahmen, denn YouTube erlaubt nur den /embed/-Pfad im iframe. Aus youtube.com/watch?v=ABC123 wird also youtube.com/embed/ABC123 — die ID bleibt, der Weg davor ändert sich.

Warum youtube-nocookie.com?

Das ist YouTubes Variante mit „erweitertem Datenschutzmodus": Sie setzt keine Tracking-Cookies, solange das Video nicht abgespielt wird. Für eine deutschsprachige Seite ist das die sinnvolle Voreinstellung.

Ganz „datenschutzfrei" ist auch das nicht. Sobald die Seite lädt, wird eine Verbindung zu Google aufgebaut und die IP-Adresse deiner Besucher übertragen. Wer das vermeiden will, zeigt zunächst nur ein Vorschaubild und lädt das Video erst nach einem Klick — das nennt man Zwei-Klick-Lösung. Und dein Datenschutzhinweis sollte die Einbettung nennen. Das ist kein Rechtsrat, sondern der Hinweis, dass es hier eine Entscheidung zu treffen gibt.

Startzeit und weitere Einstellungen

src="https://www.youtube-nocookie.com/embed/ABC123?start=90&rel=0"

start=90 beginnt bei Sekunde 90, rel=0 schränkt die vorgeschlagenen Videos am Ende auf den eigenen Kanal ein. Mehrere Angaben werden mit & verbunden, die erste hängt mit ? an.

Vimeo einbetten

<iframe
  src="https://player.vimeo.com/video/DEINE_VIDEO_ID"
  title="Beschreibung des Videos"
  allowfullscreen
  loading="lazy"></iframe>

Dasselbe Prinzip, andere Adresse. Die ID ist bei Vimeo eine reine Zahlenfolge und steht in der Adresse direkt hinter vimeo.com/.

Damit es auf dem Handy passt — die zwei wichtigen Zeilen

Ein <iframe> hat von sich aus eine feste Größe, meist 300 × 150 Pixel. Das ist winzig und passt zu keinem Video. Früher brauchte man dafür einen Trick mit verschachtelten Behältern — heute genügt das:

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 12px;
}

aspect-ratio: 16 / 9 sorgt dafür, dass die Höhe immer im richtigen Verhältnis zur Breite steht — auf dem Handy wie am großen Bildschirm, ohne schwarze Balken. Bei Videos im Hochformat nimmst du 9 / 16.

border: 0 nicht vergessen. Browser zeichnen um ein <iframe> standardmäßig einen dünnen Rahmen. Der fällt am Rechner kaum auf und sieht auf dem Handy nach Versehen aus.

Eine eigene Videodatei einbinden

<video
  controls
  width="1280"
  height="720"
  poster="vorschaubild.jpg"
  preload="metadata">
  <source src="mein-video.mp4" type="video/mp4">
  Dein Browser kann dieses Video nicht anzeigen.
</video>

Nimm MP4, und halte die Datei klein. MP4 mit H.264 läuft überall. Ein Video direkt aus dem Handy hat schnell 200 Megabyte — das lädt niemand. Für mehr als kurze Clips lohnt YouTube oder Vimeo: Die liefern das Video in passender Qualität aus und kosten dich keinen Speicherplatz. Eigene Dateien sind sinnvoll für kurze, stumme Hintergrund- oder Demo-Clips.

Die vier Gründe, warum dein Video nicht erscheint

1. Der watch?v=-Link steht im src. Es muss die /embed/-Adresse sein. Der häufigste Fall.
2. Das iframe ist winzig. Ohne CSS bleibt es bei 300 × 150 Pixel — es ist da, nur zu klein, um etwas zu erkennen.
3. Bei eigener Datei: der Pfad stimmt nicht. Gleiche Ursachen wie beim Bild — Groß- und Kleinschreibung, falscher Ordner, nicht mit hochgeladen. Siehe Bild einfügen.
4. Das Video ist auf YouTube als privat gesetzt. Dann sieht es niemand außer dir. „Nicht gelistet" funktioniert für Einbettungen, „privat" nicht.

Dasselbe ohne Code: anklicken statt tippen

Ein Video auf einer fertigen Seite auszutauschen ist der häufigere Fall — das neue Webinar, die neue Aufzeichnung. Genau dafür hat PageFix eine eigene Funktion: ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen