Hero

Vollbreiter Bereich mit Hintergrundbild, optionalem Hintergrundvideo und Text. Das Element lässt sich an jeder Stelle der Seite einsetzen, nicht nur im oberen Seitenbereich.

Im Backend lassen sich Textbreite und Abdunkelung des Hintergrunds wählen; bei Hintergrundvideo außerdem verzögertes Laden und eine Pause-Schaltfläche.

Redaktionelle Optionen

Der Hero-Bereich bildet eine vollbreite Fläche mit Bild im Hintergrund und optional darüber liegendem Text. Das Hintergrundbild wird im Querformat 16:9 zugeschnitten; auf Wunsch ergänzt ein selbst gehostetes Hintergrundvideo den stillen Eindruck durch eine kurze Schleife.

Im Tab Darstellung lassen sich die Textbreite (Standard oder Schmal) und die Abdunkelung des Hintergrunds einstellen — von ausgeschaltet bis stark, je nachdem wie gut der Text lesbar sein soll.

Der Tab Hintergrundvideo (optional) bleibt leer, wenn nur ein Bild gewünscht ist. Für Video werden acht Dateien in vier Auflösungen hinterlegt; verzögertes Laden schont den ersten Seitenaufbau, die optionale Pause-Schaltfläche erfüllt WCAG 2.2.2 bei automatisch laufendem Video.

Barrierefreiheit

Was verstanden werden soll, steht im Text des Heroes. Hintergrundbild und Hintergrundvideo dienen der Wirkung und sind für Hilfstechnologien als dekorativ gekennzeichnet — Vorlese-Software liest den sichtbaren Text, nicht die Medien dahinter.

Bewegung im Hintergrund

Viele Systeme kennen die Einstellung „Weniger Bewegung“. Ist sie aktiv, startet kein Hintergrundvideo; das eingestellte Hintergrundbild bleibt sichtbar. Dafür ist im Backend nichts zusätzlich einzurichten.

Läuft ein Hintergrundvideo von selbst in einer Schleife, verlangt die Richtlinie WCAG 2.2.2 eine Möglichkeit, die Bewegung anzuhalten. Dafür kann im Tab Hintergrundvideo (optional) eine Pause-Schaltfläche eingeblendet werden — in der Darstellung oben ist sie aktiv. Sämtliche inhaltlichen Aussagen sollten deshalb im Text stehen und nicht allein vom Video getragen werden.

Anforderungen / benötigte Daten

Hintergrundbild

Querformat 16:9 (Zuschnitt im Backend). Beim Laden erscheint das Bild zuerst — relevant für LCP, wenn der Hero weit oben auf der Seite steht. Responsive Varianten erzeugt das System automatisch.

Nur Bild (ohne Hintergrundvideo): endgültige Darstellung in voller Breite — mindestens 1920 × 1080 px, empfohlen 3840 × 2160 px. Kleinere Ausgangsmaterialien nicht hochskalieren.

Mit Hintergrundvideo: Standbild bis zur Wiedergabe — 1920 × 1080 px, gleicher Bildausschnitt wie das Video (z. B. poster-1920.jpg aus dem Encode-Skript).

Text

Der Text wird per RTE gepflegt und liegt lesbar über Hintergrundbild und gegebenenfalls Video. Er kann leer bleiben, wenn der Hero nur aus dem Bild bestehen soll; üblicherweise werden darauf Überschrift und Kurztext platziert.

Hintergrundvideo (optional)

Mit Video werden neun Dateien benötigt — ein Hintergrundbild (1920 × 1080 px, siehe oben) plus acht Video-Varianten. Die Dateinamen sind beliebig; entscheidend sind Format und Auflösung. Alternativ kann robinson2 beauftragt werden, aus einem Master-Video (16:9, mindestens 1920 × 1080 px, SDR/Rec. 709, 24 oder 25 fps, ohne Ton, kurzer Loop von 3–8 s, z. B. ProRes oder H.264 in hoher Qualität) per Skript Poster und alle Web-Varianten zu erzeugen (Zusatzaufwand).

Videodateien

Je Auflösungsstufe zwei Dateien – WebM und MP4:

1920×1080 (Desktop) – WebM (VP9) und MP4 (H.264)
1280×720 (Laptop) – WebM und MP4
960×540 (Tablet) – WebM und MP4
640×360 (Mobil) – WebM und MP4

Anforderungen an die Videos (Metadaten & Technik)

Diese Vorgaben gelten für alle acht Video-Dateien und sollten bei der Produktion bzw. beim Export berücksichtigt werden:

Querformat 16:9 – nicht hochkant, nicht aus kleineren Auflösungen hochskaliert
Kurzer Loop (ca. 3–8 Sekunden), nahtlos wiederholbar
Keine Audiospur – Video komplett stumm
SDR (normale Helligkeit, kein HDR); Farbraum sRGB / Rec. 709
Konstante Bildrate – 24, 25 oder 30 fps (nicht variabel)
MP4: Codec H.264, für Web auslieferbar („Fast Start“ / moov-Atom am Dateianfang)
WebM: Codec VP9
Schlanke Dateien: kurzer Loop, mäßige Datenrate – grobe Richtwerte pro Stufe (WebM + MP4 zusammen): Desktop unter ca. 1,2 MB, Laptop 700 KB, Tablet 450 KB, Mobil 300 KB
Keine überflüssigen Metadaten in den Video-Dateien (z. B. Kamera-EXIF, GPS, eingebettete Kapitel) – nur Bildinhalt