Tutorial: Vimeo Hintergrund-Video mit Play Button Funktion

Heute gibts mal ein etwas fortgeschritteneres Webflow Tutorial. Aus meiner Webflow Onlinekurs Community kam der Wunsch diesen Video Player zu bauen, der im Prinzip erstmal im Loop ohne Ton als Background-Video abläuft. Klickt man auf einen Unmute Button, spielt sich das Video von vorne ab und der Ton wird aktiviert. Das Ganze kann man direkt in Webflow auch mit einer netten Klick-Animation versehen.

Wir brauchen dafür ein bisschen Custom jQuery Code. Zudem muss die Vimeo API mit eingebunden werden, wenn man Vimeo iFrames ansprechen und umstellen möchte. Das Projekt gibts wie immer als kostenloses Cloneable auf meinem Webflow Account.

Hintergrundvideo mit benutzerdefiniertem Player in Webflow

Einleitung

Willkommen zu einem neuen Webflow Tutorial. Heute zeige ich euch eine fortgeschrittene Funktion, bei der wir eigenen Code hinzufügen müssen, um ein sich automatisch abspielendes Hintergrundvideo mit eigener Player UI zu integrieren. Diese Funktion wurde mir von einem Teilnehmer meines Online-Kurses geschickt, der es bei einer Agentur aus der Schweiz gesehen hat. Das Video wird von Vimeo gehostet und sobald man auf "Play" drückt, startet das Video mit Ton und man kann den Ton auch stummschalten.

Schritt 1: Quellcodeanalyse der Referenzseite

In der Webflow-Seite, die ich gefunden habe, sieht es so aus, als ob sie ein externes Skript für das Hintergrundvideo eingebunden haben. Wenn wir auf den "Play"-Button klicken, startet das Video von vorne. Es gibt jedoch noch ein kleines Problem mit der Benutzeroberfläche, da sich der "Play"-Button nicht ausblendet. Im Quellcode der Seite sehen wir, dass sie den Vimeo-Player und die Vimeo-API verwendet haben.

Schritt 2: Einbinden des Vimeo-Players und der API in Webflow

Um das Video in Webflow einzubinden, benötigen wir den Vimeo-Player und die API. Ich habe mir den Quellcode angesehen und einige Elemente herausgezogen, die wir verwenden können. Wir fügen den Vimeo-Player und die API in unser Webflow-Projekt ein und passen sie entsprechend an. Dann kopieren wir den Link zu unserem Video und fügen ihn in das Embed-Feld ein. Zusätzlich kopieren wir auch den jQuery Code für den Unmute-Button und passen ihn an. Dadurch können wir das Video abspielen und den Ton stummschalten.

Schritt 3: Das Video von Anfang an abspielen lassen

Um das Video von Anfang an abzuspielen, fügen wir noch ein weiteres Element hinzu und verwenden die Funktion "Set Current Time" auf Null, um die aktuelle Wiedergabezeit zurückzusetzen. Auf diese Weise startet das Video jedes Mal von vorne, wenn wir auf "Play" klicken.

Schritt 4: Styling des Hintergrundvideos

Nachdem wir die grundlegende Funktion implementiert haben, können wir uns nun dem Styling widmen. Wir erstellen Container und Wrapper für das Video und positionieren die Buttons entsprechend. Mit Hilfe von CSS und Animationen gestalten wir den Unmute-Button und den Play-Button nach unseren Vorstellungen. Wir können beispielsweise einen magnetischen Effekt hinzufügen, um die Buttons interaktiver zu machen.

Schritt 5: Hinzufügen eines Overlay-Effekts

Um das Video noch ansprechender zu gestalten, könnten wir auch ein Overlay hinzufügen, das den Hintergrund abdunkelt und beim Klicken auf "Play" heller wird. Dadurch entsteht ein interessanter visueller Effekt, der dem Nutzer signalisiert, dass das Video erneut abgespielt wird.

Fazit

Zusammenfassend lässt sich sagen, dass wir mit Webflow und ein wenig eigenem Code ein benutzerdefiniertes Hintergrundvideo mit einem individuellen Player erstellen können. Durch die Einbindung des Vimeo-Players und der API können wir das Video von Anfang an abspielen lassen und den Ton steuern. Mit Hilfe von CSS-Styles und Animationen können wir das Design anpassen und sogar zusätzliche Effekte hinzufügen, um das Video noch ansprechender zu gestalten. Viel Spaß beim Ausprobieren und Experimentieren!