Video

Responsives Video-Element mit Unterstützung für Landscape- und Portrait-Formate, optionalem Play-Button-Overlay, Untertiteln via Slots und automatischer WCAG-1.4.2-Konformität bei Autoplay.

Landscape (Standard)

Das Standard-Format für Videos im Querformat. Das Video nimmt die volle verfügbare Breite ein und wird im 16:9-Verhältnis dargestellt. Ein Klick auf den Play-Button startet die Wiedergabe und blendet die nativen Steuerungselemente ein.

Video im Querformat

<Video
  src="/videos/intro.webm"
  poster="/images/video-poster.jpg"
/>

Portrait

Für Hochformat-Videos (z.B. Smartphone-Aufnahmen, Social-Media-Clips). Das Video wird zentriert dargestellt und auf eine maximale Breite von 24rem begrenzt, damit es auf großen Bildschirmen nicht überdimensional wirkt.

Video im Hochformat

<Video
  src="/videos/reel.mp4"
  orientation="portrait"
  poster="/images/portrait-poster.jpg"
/>

Autoplay mit Loop

Für dekorative Hintergrund- oder Ambient-Videos. Wenn autoplay gesetzt ist, wird muted automatisch erzwungen (WCAG 1.4.2 – kein automatisch abgespielter Ton). Der Play-Button wird bei Autoplay nicht angezeigt.

Autoplay-Video (stummgeschaltet)

<Video
  src="/videos/ambient.webm"
  autoplay
  loop
/>

Mit Bildunterschrift

Über den caption-Slot kann eine Bildunterschrift unterhalb des Videos platziert werden. Die Bildunterschrift wird automatisch mit dem semantischen <figcaption>-Element dargestellt.

Video mit Beschreibung

Blumenwiese im Fruehlingswind – CC0-Beispielvideo

<Video src="/videos/demo.webm">
  <span slot="caption">Produktdemo vom 15. März 2026</span>
</Video>

Mit Untertiteln

Der tracks-Slot erlaubt das Einbinden von <track>-Elementen für Untertitel, Captions oder Audiodeskription. Dies ist essenziell für die Barrierefreiheit von Videos mit gesprochenem Inhalt.

Video mit Untertitel-Track

Beispiel mit Untertitel-Slot (Track-Datei nicht vorhanden)

<Video src="/videos/interview.webm">
  <track
    kind="subtitles"
    src="/vtt/de.vtt"
    srclang="de"
    label="Deutsch"
    default
    slot="tracks"
  />
</Video>

Redakteur-Hinweise

Empfehlungen für barrierefreie, performante Videos.

Element	Empfehlung
Dateiformat	MP4 mit H.264-Codec. WebM als zusätzliche Quelle für kleinere Dateien. Max. 20MB pro Video.
Auflösung	1920×1080 (Landscape) oder 1080×1920 (Portrait). Keine 4K nötig — wird sowieso runterskaliert.
Länge	Autoplay-Videos: max. 15 Sekunden, ohne Ton. Erklärvideos: 1–3 Minuten ideal.
Untertitel	Pflicht bei gesprochenen Inhalten (WCAG). WebVTT-Format (.vtt). Auch für Nutzer ohne Ton wichtig.
Bildunterschrift	Optional, 1 Satz. Beschreibt Kontext, nicht den Inhalt. „Imagefilm 2025“, „Rundgang durch das Rechenzentrum“.
Poster-Bild	Immer ein aussagekraeftiges Vorschaubild setzen. Ohne Poster sehen Nutzer einen schwarzen Kasten.

Installation

cp-components add video