Video Cover Block WordPress

WordPress: Video einbinden mit dem Block-Editor

Auf einer WordPress-Seite ein Video als Cover einbinden

In diesem Beitrag erläutern wir, wie man auf relativ einfache Weise ein Video z. B. auf der Startseite einer WordPress-Seite als Cover einfügt. Das kann eine durchaus interessante Alternative zu einem Bild sein. Wir nutzen auch in diesem Fall wieder den Block-Editor (Gutenberg).

Zunächst fügen wir ein Video als Cover ein. Auf der Seite pixabay.com oder auf coverr.co findet man einige lizenzfreie und teilweise optimierte Videos, die man durchaus auf die eigene Seite hochladen und als (Hintergrund-) Video nutzen kann. Nur der Vollständigkeit halber: Eigene Videos kann man natürlich auch nutzen, sollte die aber nicht auf den eigenen Webspace ablegen.

Man kann durchaus auch ein Video auf youtube ablegen und auf der Webseite einbinden. Aber das ist an sich ein anderes Thema

Grafik: haurand.com


Nach dem Einfügen des Videos, kann man die Einstellungen (siehe Markierung im screenshot) ändern.

Hier hat man verschiedene Möglichkeiten: Links- und rechtsbündig, zentriert, weite Breite und gesamte Breite.

Sehr schöne Ergebnisse haben wir im Zusammenhang mit dem theme twenty twenty mit der Einstellung „Gesamte Breite“ erhalten.


Die weiteren Einstellungen für das Video im Cover-Block:

  • Die Größe erklärt sich eigentlich selbst: hier kann man die Mindesthöhe für das Video in Pixeln angeben.
  • Overlay: Damit ist eine farbliche Überlagerung des Videos gemeint. Es gibt hier eine Auswahl von Standard-Farben für das Overlay. Die Farbe kann aber auch bei Klick auf den Button „Individuelle Farbe“ ganz speziell gewählt werden.
    Außerdem besteht die Möglichkeit, zwischen „Einfarbig“ und „Verlauf“ zu wählen. Bei Verlauf ergibt sich eine Änderung im Farbton von rechts nach links.
  • Bei der „Hintergrund-Deckkraft“ kann man Werte eingeben, die bestimmen, wie das Video durch die Farbe für das Overlay überlagert werden soll: Je kleiner der Wert, desto geringer ist die Überlagerung durch die gewählte Farbe.
  • Schließlich kann man über die Option „Erweitert“ noch eine oder mehrere spezielle CSS-Klassen angeben, die ohne den Punkt angegeben werden.
    In diesem Beispiel haben wir eine CSS-Klasse „stapel_hinten“ gewählt:
    / ------------------------------- */
    / Grafiken im Stapel ganz hinten /
    / - wichtig für sticky menue /
    / ------------------------------- */
    .stapel_hinten {
    z-index:-1;
    }
    Damit kann man dafür sorgen, dass das Video z. B. bei einem sticky header beim Theme twenty twenty das Menü im Header nicht überlagert.


Wie das aussehen könnte, kann man sich hier auf einer Testseite von uns ansehen.

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Infos im Blog

Mehr erfahren auf unserer Webseite

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.