Anleitung zum Einbinden von Videos in Storyblok CMS und Nuxt.js

In diesem Blogbeitrag führen wir Sie Schritt für Schritt durch den Prozess, wie Videos mithilfe des CMS Storyblok in einer mit Nuxt.js gerenderten Webseite eingebunden werden können, damit spannende Video-Inhalte auf der Website angezeigt werden.

Die Einbindung von Video-Elementen besteht aus vier Schritten:

1. Video-Block in Storyblok anlegen
2. Video-Element im Content anlegen
3. Vue-Komponente zum Rendern des Video-Tags implementieren
4. Security-Einstellungen für die Video-Fullscreen-Ansicht

1. Video-Block in Storyblok anlegen

Der erste Schritt für die Video-Einbindung besteht darin, in Storyblok einen speziellen "Nestable Block" für Videos zu erstellen. Hierzu legen wir einen neuen Block mit dem Namen „Video" an. Dieser Block sollte Felder für ein Vorschaubild, das Video-Asset sowie die wichtigsten Attribute des HTML-Video-Tags wie Autoplay oder Loop enthalten.
Um sicherzustellen, dass alle relevanten Attribute abgedeckt sind, können wir uns an die Dokumentation von Mozilla Developer Network (MDN) wenden: Video HTML Tag - Attributes.

2. Video-Element im Content anlegen

Nachdem der Video-Block erstellt wurde, können wir ihn im Content verwenden und nach unseren Bedürfnissen konfigurieren. Dies ermöglicht eine flexible Handhabung verschiedener Videos auf der Webseite, da die Attribute individuell festgelegt werden können.

3. Vue-Komponente zum Rendern des Video-Tags implementieren

Im nächsten Schritt implementieren wir eine Vue-Komponente in unserem Nuxt.js Frontend-Projekt. Hierfür erstellen wir eine neue Datei im Ordner "storyblok/". Diese Vue-Komponente wird den HTML-Video-Tag enthalten, wobei die Eigenschaften des Videos, die über die Storyblok-Content-API abgerufen werden, mit den Video-Tag-Attributen verbunden werden.

In dieser Komponente werden die Eigenschaften des Video-Tags durch Props übergeben, die mit den Storyblok-Daten verbunden sind.

4. Security-Einstellungen für die Video-Fullscreen-Ansicht

Um Videos im Fullscreen anzeigen zu können bei gleichzeitiger Verwendung des Moduls "nuxt-security" auf unserer Nuxt Website, müssen wir die nötige Permission Policiy setzen. Ansonsten wird der Fullscreen-Button im Video-Element, wie im nachfolgenden Bild zusehen, deaktiviert und ausgegraut dargestellt.

Um die Permission Policiy für Fullscreen zu setzen, wird diese in der nuxt.config.ts für die Video-Quelle ergänzt:

nuxt.config.ts

security: {
  permissionsPolicy: {
    'fullscreen':['self', '*.storyblok.com']
  }
},

Ergebnis:

Wie das eingebundene Video im Frontend aussehen kann, finden Sie auf der dkdMACH-Startseite.

Wir hoffen, dass diese Anleitung Ihnen dabei hilft, multimediale Inhalte in Ihre Webprojekte zu integrieren. Bei weiteren Fragen oder Anregungen stehen wir Ihnen gerne zur Verfügung. Viel Spaß beim Erstellen Ihrer Videoinhalte!