Design System
Playground Zur Vorlage

Elemente · MedienVideo

Element · 6 Varianten

Video

elements/Video.astro

Poster als Bild, Play als Primary-Pille unten links. Kein Schleier, kein zentriertes Symbol. Läuft: native Controls.

Notizen

  • Bestand: kein Video-Element, keine Sektion mit Video.
  • Kein Overlay: Play-Knopf sitzt als Pille auf dem Bild, opak, in der Ecke wie ein Label.
  • Button-Icon play ergänzt 2026-09-02.

Props

Name Typ Default Notiz
variant "poster" | "poster-caption" | "ohne-poster" | "quadrat" | "laeuft" | "laedt" "poster" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<Video variant="poster" surface="nacht" />

01 · Poster

16:9, Pille unten links

Bild. Primary small, nur Icon.

Nacht

Paper

02 · Caption

Dauer unter dem Bild

Bild Caption. nw-caption.

Nacht

Werkstatt, 2 min 14.

Paper

Werkstatt, 2 min 14.

03 · Ohne Poster

Fond mit Pille

Skeleton. granit-100 / 900.

Nacht

Paper

04 · 1:1

Social-Format

Bild 1:1. max-w-xs.

Nacht

Paper

05 · Läuft

Native Controls

Browser. Kein eigener Player.

Nacht

Paper

06 · Lädt

Skeleton

Bild Skeleton. animate-pulse.

Nacht

Paper