Hero-Videos in WordPress mit Posterbild und mobiler Alternative steuern
Video, Posterbild und Text sollen im Hero-Bereich gemeinsam bearbeitet und aufeinander abgestimmt werden. Ein individueller Gutenberg-Block verbindet die Medienauswahl mit direkter Textbearbeitung und lässt die Redaktion für Mobilgeräte zwischen Video und Posterbild wählen.
Ein Hero-Video bringt Bewegung und Atmosphäre in den Einstieg einer Website. Bei seiner Umsetzung gehören auch Dateigrösse, Ladezeit und technische Auslieferung zur Planung. Für die redaktionelle Steuerung haben wir einen Gutenberg-Block entwickelt, der Video, Posterbild und Text in einer gemeinsamen Bearbeitungsoberfläche zusammenführt.
Im Block «Hero mit Video» werden Eyebrow und Hauptüberschrift direkt über dem Motiv bearbeitet. Das Posterbild sowie die Einstellungen für Wiederholung und mobile Wiedergabe befinden sich in den Block-Einstellungen.
Video und Posterbild gemeinsam pflegen
Das Hintergrundvideo lässt sich über die Bearbeitungsschaltfläche direkt am Motiv ersetzen. Das Posterbild wird in den Block-Einstellungen ausgewählt und erscheint dort als Vorschau. Beide Medien stammen aus der WordPress-Mediathek und werden gemeinsam dem Hero-Bereich zugeordnet.
Texte direkt über dem Motiv bearbeiten
Eyebrow und Hauptüberschrift werden direkt in der Textfläche des Hero-Bereichs bearbeitet. Die Redaktion sieht dadurch während der Eingabe, wie Textlänge, Zeilenumbruch und Bildmotiv zusammenspielen.
Eine transparente Abdunklung hebt die weisse Schrift vom Video ab. Eyebrow und Überschrift liegen gemeinsam im unteren Bereich des Motivs und lassen der Bildwirkung grosszügig Raum.
Video oder Posterbild für Mobilgeräte wählen
Über die Einstellung «Video auf Mobilgeräten abspielen» legt die Redaktion fest, welches Medium auf kleineren Bildschirmen erscheint. Bei aktivierter Wiedergabe wird das Video auch mobil abgespielt. Wählt sie das Posterbild, pausiert das Plugin das Video bis zu einer Bildschirmbreite von 767 Pixeln und zeigt stattdessen das Bild.
Das Posterbild stellt den Hero-Bereich auf kleineren Bildschirmen als statisches Motiv dar. Die Videoausgabe übernimmt dort die Bewegung der grossen Darstellung.
Wiedergabe auf den Hero-Bereich abstimmen
Das Video startet automatisch und ohne Ton. Das Attribut playsinline sorgt dafür, dass die Wiedergabe auf mobilen Geräten innerhalb des Hero-Bereichs bleibt. Über die Einstellung «Video wiederholen» bestimmt die Redaktion, ob das Video nach seinem Ende erneut beginnt.
Bis das Video abspielbereit ist, zeigt das Posterbild bereits das vollständige Motiv. Ausgeblendete Bedienelemente fügen die Wiedergabe in die Gestaltung des Hero-Bereichs ein.
Motiv und Text nacheinander einblenden
Im Frontend füllt der Hero-Bereich die Höhe des sichtbaren Browserfensters. Video oder Posterbild werden flächig eingepasst. Beim Laden erscheinen nacheinander die Abdunklung, die Textfläche, die Eyebrow und die Hauptüberschrift. CSS steuert diese Übergänge innerhalb des Blocks.
Block serverseitig ausgeben und mobil steuern
PHP erzeugt die Ausgabe des Blocks auf dem Server. WordPress ermittelt die Medienadressen aus den ausgewählten Anhängen oder gespeicherten URLs und erstellt daraus Posterbild, Video und Text.
Eine JavaScript-Funktion setzt die gewählte mobile Wiedergabe um. Sie prüft die Einstellung beim Laden der Seite und bei einer Änderung der Fensterbreite und wechselt entsprechend zwischen Video und Posterbild.
Ergebnis
Video, Posterbild und Text gemeinsam gestalten
Der Gutenberg-Block bündelt Video, Posterbild, Text und Wiedergabeeinstellungen in einer gemeinsamen Oberfläche. Die Redaktion bearbeitet den Hero-Bereich direkt im Editor und wählt die gewünschte Medienausgabe für Mobilgeräte.
Medien gemeinsam pflegen
Video und Posterbild werden über die WordPress-Mediathek ausgewählt. Das Posterbild erscheint beim Laden und dient wahlweise als mobiles Hero-Motiv.
Text direkt bearbeiten
Eyebrow und Hauptüberschrift werden direkt über dem Motiv bearbeitet. Abdunklung und gestaffelte Einblendung integrieren den Text in die Hero-Gestaltung.
Wiedergabe steuern
Die Redaktion wählt die mobile Ausgabe und die Wiederholung des Videos. PHP und JavaScript übertragen diese Einstellungen in die responsive Frontend-Ausgabe.