WordPress ermöglicht es Content-Managern, Videos direkt auf einer Webseite über den Block-Editor einzubinden, indem sie eine Datei in die Mediathek im WordPress-Admin hochladen und das Video anschliessend auf der Seite platzieren. So haben die Benutzer die volle Kontrolle über ihre Inhalte, ohne auf einen Drittanbieter-Videodienst zurückgreifen zu müssen.
Wer YouTube oder Vimeo besucht, sieht, dass die Vorschau in der Regel kuratiert ist — meist wird ein passendes Bild ausgewählt, das den Inhalt des Videos andeutet. Der Video-Block im WordPress-Block-Editor erlaubt es Content-Managern, eine eigene Bilddatei hochzuladen und als «Poster» (bzw. Vorschaubild) zuzuweisen. Allerdings muss dieses Bild separat erstellt und zugewiesen werden.
Dieses zusätzliche Erstellen eines separaten Bildes stand schon länger auf meiner Liste kleinerer Probleme, die ich lösen wollte. Dank der Erweiterbarkeit des WordPress-Block-Editors konnte ich meine eigene Ergänzung zu den Standardfunktionen bauen. Anstatt einen komplett neuen Block zu entwickeln, nutze ich Hooks und Filter, um ein benutzerdefiniertes Block-Attribut sowie eine eigene Oberfläche hinzuzufügen, über die ich das Vorschaubild direkt verwalten kann. Ein perfektes kleines Projekt für einen ruhigen Freitag.
In meiner unten dargestellten Lösung ist das hochgeladene Video im ersten Frame leer — genau dort, wo normalerweise die Vorschau generiert wird. (Das Video blendet aus Weiss ein.) Das bringt nichts, weil der Benutzer keine Vorschau sieht. Im zweiten Beispiel habe ich mit meiner Lösung einen Frame bei 21 Sekunden ausgewählt, um in einem ästhetisch passenden Bild zu zeigen, worum es im Video geht. Diese neue Einstellung erspart mir das Öffnen eines Bildbearbeitungsprogramms und das manuelle Erstellen der Vorschau.
