Ein Hochformat-Video gehört auf die Website, wenn es dort etwas erklärt, und es gehört richtig eingebunden: mit einem leichten Vorschaubild, ohne Ton beim Start, mit sichtbarer Pause-Taste, mit Untertiteln, wenn gesprochen wird, und ohne automatische Bewegung für Menschen, die Bewegung in ihrem System reduziert haben. Technisch heißt das in den meisten Fällen ein eigenes <video>-Element mit den Attributen muted, playsinline, poster und einem bewusst gewählten preload, eine feste Seitenverhältnis-Angabe gegen Layoutsprünge und eine Untertiteldatei. Wer das beachtet, kann Reels auf der Website zeigen, ohne die Seite langsamer oder schwerer bedienbar zu machen.
Warum Hochformat auf der Website eigene Regeln braucht
Ein Video im Format 9:16 ist fast doppelt so hoch wie breit. Auf dem Handy füllt es den Bildschirm, auf dem Laptop würde es in voller Breite weit über den sichtbaren Bereich hinausragen. Gleichzeitig ist ein Video meist die schwerste Datei auf der Seite. Damit treffen drei Probleme zusammen: Platz, Ladezeit und Bedienbarkeit. Dazu kommt, dass Browser Videos mit Ton nicht einfach selbst starten, und dass Bewegung für manche Menschen ein echtes Hindernis ist.
Dieser Beitrag geht die Punkte in der Reihenfolge durch, in der sie bei der Einbindung auftauchen. Allgemeine Fragen zur Ladezeitmessung sind nicht Thema dieses Beitrags, hier geht es nur um das Video selbst.
Die Attribute, auf die es ankommt
Das HTML-Element <video> hat eine Handvoll Attribute, die über Ladezeit und Verhalten entscheiden. Die Beschreibungen stützen sich auf die MDN Web Docs, die Referenz von Mozilla für Webentwicklung.
| Attribut | Was es tut | Empfehlung für Hochformat-Clips |
|---|---|---|
| — | — | — |
| poster | Bild, das angezeigt wird, solange das Video lädt | immer setzen, als komprimiertes Bild im passenden Seitenverhältnis |
| preload | Hinweis an den Browser, wie viel vorab geladen wird: none, metadata oder auto | none oder metadata, wenn das Video nicht sofort startet |
| muted | Ton beim Start aus | Pflicht, wenn das Video automatisch startet |
| playsinline | Wiedergabe im Seitenbereich statt im Vollbild | setzen, sonst öffnet das iPhone den Vollbildmodus |
| autoplay | Start ohne Klick | nur für kurze, stumme Clips, und nur mit Pause-Taste |
| controls | Bedienelemente des Browsers | setzen, sobald es Ton oder Inhalt gibt |
| loading=“lazy“ | Laden erst, wenn das Video in die Nähe des sichtbaren Bereichs kommt | noch experimentell, nicht in allen Browsern |
Zwei Feinheiten aus der MDN-Referenz: preload ist nur ein Hinweis, Browser müssen ihm nicht folgen, und autoplay hat Vorrang, denn wer automatisch abspielen will, muss laden. Und das Attribut muted lässt sich nicht mit dem Wert false ausschalten. Ist es vorhanden, ist der Ton aus.
Autoplay: was die Browser erlauben
Chrome erlaubt laut seiner eigenen Dokumentation stummes Autoplay immer. Mit Ton startet ein Video dort nur, wenn die Person vorher mit der Seite interagiert hat, wenn sie auf dem Desktop bei dieser Seite schon öfter Videos mit Ton angesehen hat oder wenn die Seite als App installiert ist.
Safari auf dem iPhone ist strenger und ähnlich zugleich. Laut WebKit dürfen Videos ohne Nutzergeste starten, wenn sie keine Tonspur haben oder mit muted eingebunden sind. Sie starten erst, wenn sie sichtbar sind, und pausieren, wenn sie aus dem Bild gescrollt werden. Bekommt ein solches Video ohne Nutzergeste plötzlich Ton, hält es an. Ohne playsinline öffnet das iPhone das Video im Vollbild, was für einen Clip mitten im Text selten gewollt ist.
Die Folge für die Praxis: Ein Video, das automatisch starten soll, ist stumm, hat muted und playsinline und funktioniert inhaltlich auch ohne Ton. Ein Reel, in dem jemand spricht, startet besser erst nach einem Klick, mit Ton und mit Untertiteln.
Ladezeit und Layout
Das größte sichtbare Element beim Laden einer Seite bestimmt den Largest Contentful Paint, kurz LCP, eine der Kennzahlen, mit denen Google die Ladeerfahrung misst. Bei Videos zählt laut web.dev der frühere der beiden Zeitpunkte: Ladezeit des Posterbilds oder Darstellung des ersten Videobilds. Steht dein Hochformat-Video oben auf der Seite, entscheidet also oft das Posterbild über den Wert. Ein großes, unkomprimiertes Poster macht die Seite langsamer, ein kleines, gut komprimiertes hilft.
Für Videos weiter unten auf der Seite gilt: Sie müssen nicht sofort laden. preload="none" oder preload="metadata" verhindert, dass der Browser die ganze Datei vorab holt. Das neue Attribut loading="lazy" für Videos ist laut den Kompatibilitätsdaten von MDN noch experimentell, Chrome unterstützt es ab Version 150, Firefox und Safari bisher nicht. Wer sich darauf verlässt, lädt in diesen Browsern trotzdem früh. Ein kleines Skript, das Videos erst bei Annäherung an den sichtbaren Bereich startet, ist verlässlicher.
Gegen Layoutsprünge hilft eine feste Größe. MDN empfiehlt, Breite und Höhe anzugeben, damit der Platz schon reserviert ist, bevor das Video lädt. Für Hochformat bedeutet das in CSS ein Seitenverhältnis von 9 zu 16 und eine Höchsthöhe, die sich am Bildschirm orientiert. Auf dem Desktop steht ein Hochformat-Video dann neben dem Text statt in voller Breite darüber.
Untertitel und Alternativen
Die Web Content Accessibility Guidelines, kurz WCAG, sind der internationale Standard für barrierefreie Websites. In der Version 2.2 verlangt das Erfolgskriterium 1.2.2 auf der Grundstufe A Untertitel für alle vorab aufgenommenen Tonspuren in Videos. Kriterium 1.2.3 verlangt eine Audiobeschreibung oder eine Textalternative für den Bildinhalt, auf Stufe AA verlangt Kriterium 1.2.5 die Audiobeschreibung.
Für die Website heißt das: Untertitel gehören nicht nur ins Bild gebrannt, sondern idealerweise als eigene Datei dazu. HTML sieht dafür das Element <track> mit einer Datei im Format WebVTT vor, mit kind="captions" für Untertitel, die auch Geräusche beschreiben. Eingebrannte Untertitel aus dem Reel sind für Social Media sinnvoll, auf der Website lassen sie sich weder ausschalten noch vergrößern. Warum Untertitel in Reels überhaupt so wichtig sind, steht im Beitrag über Untertitel in Reels.
Ein stummes Stimmungsvideo ohne Sprache braucht keine Untertitel. Trägt es aber Information, etwa einen Arbeitsablauf, gehört eine kurze Textbeschreibung daneben.
Bewegung, Pause und reduzierte Bewegung
Zwei WCAG-Kriterien betreffen automatisch startende Videos direkt. Kriterium 2.2.2 verlangt auf Stufe A: Bewegte Inhalte, die automatisch starten, länger als fünf Sekunden laufen und neben anderem Inhalt stehen, brauchen eine Möglichkeit, sie zu pausieren, anzuhalten oder auszublenden. Ein Hochformat-Clip in Schleife neben dem Text fällt genau darunter. Kriterium 1.4.2 verlangt: Spielt Ton länger als drei Sekunden automatisch, muss er sich anhalten oder unabhängig leiser stellen lassen.
Dazu kommt die Einstellung für reduzierte Bewegung. Betriebssysteme bieten eine Option, Bewegung zu verringern, und Websites können sie über die CSS-Abfrage prefers-reduced-motion auslesen. Laut MDN funktioniert sie seit Januar 2020 in allen gängigen Browsern. Ist sie aktiv, sollte ein Video nicht automatisch starten, sondern nur das Posterbild mit einer Starttaste zeigen. Das WCAG-Kriterium 2.3.3 auf der höchsten Stufe AAA geht in dieselbe Richtung: Bewegung, die durch Interaktion ausgelöst wird, soll sich abschalten lassen.
Ob dein Betrieb rechtlich zur Barrierefreiheit verpflichtet ist, erklärt der Beitrag über die barrierefreie Website nach dem BFSG. Unabhängig davon sind diese Punkte schnell umgesetzt und machen die Seite für alle angenehmer.
Selbst hosten oder einbetten
Du kannst ein Video selbst auf deinem Server ablegen oder von einer Plattform wie YouTube einbetten. Beides hat Folgen.
Ein selbst gehostetes Video gibt dir volle Kontrolle über Poster, Autoplay, Untertitel und Ladeverhalten. Dafür musst du die Datei selbst komprimieren und dein Server muss sie ausliefern. Eine Einbettung lädt Inhalte von den Servern der Plattform, bringt deren Player mit und kann Fragen zur Einwilligung aufwerfen, die der Beitrag über Einwilligung und Tracking behandelt. Für kurze Hochformat-Clips auf Leistungsseiten ist das selbst gehostete Video meist die schlankere Lösung.
Häufige Fragen
Kann ich ein Instagram-Reel einfach einbetten?
Technisch ja, über die Einbettungsfunktion der Plattform. Du hast dann aber kaum Einfluss auf Ladezeit, Autoplay und Untertitel, und es werden Inhalte von Meta geladen. Für Leistungsseiten ist eine eigene Datei meist besser.
Muss jedes Video Untertitel haben?
Nach WCAG 2.2 Kriterium 1.2.2 brauchen vorab aufgenommene Videos mit Tonspur Untertitel. Ein stummer Clip ohne Sprache braucht keine, sollte aber bei Informationsgehalt eine kurze Textbeschreibung haben.
Reicht ein Video als Hero oben auf der Startseite?
Es kann funktionieren, wenn das Posterbild leicht ist und das Video stumm, kurz und pausierbar ist. Wichtige Aussagen gehören trotzdem als Text daneben, denn nicht jeder sieht das Video.
Was du jetzt tun kannst
- Prüfe, welche Videos auf deiner Website automatisch starten, und ob sie stumm sind und eine Pause-Taste haben.
- Setze bei jedem Video ein komprimiertes Posterbild im richtigen Seitenverhältnis.
- Stelle
preloadfür Videos unterhalb des sichtbaren Bereichs auf none oder metadata. - Ergänze
playsinline, damit das iPhone nicht ins Vollbild springt. - Lege für Videos mit Sprache eine WebVTT-Datei an und binde sie über
<track>ein. - Prüfe mit aktivierter Einstellung für reduzierte Bewegung, ob Videos dann stehen bleiben.
Wenn deine Website gerade neu gebaut oder überarbeitet wird, gehören diese Punkte in die technische Abnahme. Wie wir Websites aufbauen, steht auf der Seite zur Webentwicklung.
Quellen
- video-Element (HTML Video Embed element) (Attribute autoplay, muted, playsinline, poster, preload, loading) (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- Browser-Kompatibilitätsdaten für das video-Element (Attribut loading) (MDN browser-compat-data, GitHub), abgerufen am 2026-10-26
- Autoplay policy in Chrome (Chrome for Developers, Google), abgerufen am 2026-10-26
- New video policies for iOS (WebKit), abgerufen am 2026-10-26
- Largest Contentful Paint (LCP): welche Elemente zählen (web.dev, Google), abgerufen am 2026-10-26
- Web Content Accessibility Guidelines (WCAG) 2.2, Erfolgskriterien 1.2.2, 1.2.3, 1.4.2, 2.2.2, 2.3.3 (World Wide Web Consortium (W3C)), abgerufen am 2026-10-26
- prefers-reduced-motion (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- track-Element (HTML Embed Text Track element) (WebVTT, kind captions) (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
Stand dieses Beitrags: 2026-10-26. Rechtslage und Zahlen ändern sich, prüf vor einer Entscheidung die verlinkten Quellen.
