Videos in Webflow einbetten - die besten Möglichkeiten

Eine Website besteht nicht nur aus Bildern, Grafiken und ansprechenden Texten. Um sie wirklich zum Leben zu erwecken, sollte man die Dynamik von Videos nicht unterschätzen. Sie können einer Seite Tiefe verleihen, sie interaktiver gestalten und dem Betrachter ein besseres Erlebnis bieten. Es gibt verschiedene Ansätze Videos auf deine Webflow Website zu integrieren. Insbesondere für Einsteiger sind die ersten zwei Methoden besonders nützlich, da sie von Webflow nativ unterstützt werden. In diesem Beitrag werden wir diese Möglichkeiten beleuchten und dir zeigen, welche Art von Video am besten zu deiner Website passt.

Video / YouTube Element

Zunächst eine kurze Abgrenzung:

• Video-Element: Dies ermöglicht dir, Videos von Drittanbietern wie Vimeo oder YouTube direkt auf deiner Seite einzubetten. Dabei wird das Video inklusive der originalen Steuerelemente des jeweiligen Anbieters abgespielt. Es ist besonders praktisch, wenn dein Video bereits auf einer dieser Plattformen gehostet ist.
• YouTube-Element: Wie der Name schon sagt, ist diese Option speziell für YouTube-Videos gedacht. Sie bietet erweiterte Einstellungsmöglichkeiten, beispielsweise das automatische Abspielen des Videos oder das Stummschalten.

Dein Video wird als interaktives Element auf der Seite implementiert und man kann es direkt auf der Website abspielen und die Controls bedienen. Der Hauptvorteil dieser Integration in Webflow ist die einfache Implementierung. Vor allem wenn das Video bereits auf einer Plattform wie YouTube oder Vimeo gehostet ist, erleichtert das den Prozess erheblich. Für besonders große Videos, die mehr als 30MB umfassen, ist diese Methode interessant.

Das Video Element lässt sich außerdem aus dem CMS mit Videolinks füttern.

Background Videos

Neben dem Video / YouTube Element bietet Webflow selbst die Möglichkeit ein Hintergrundvideo, in Webflow "Background Video” genannt, hochzuladen.

Das hochzuladende Video sollte in einem der folgenden Formate vorliegen: Webm, mp4, mov oder ogg. Dabei ist zu beachten, dass die Dateigröße 30 MB nicht überschreiten darf.

Anpassbare Einstellungen:

• Loop video: Mit dieser Option wird dein Video kontinuierlich wiederholt, sobald es zu Ende gespielt wurde.
• Autoplay Video: Aktiviere diese Einstellung, um das Video automatisch beim Laden der Webseite abzuspielen.
• Include play/pause button: Diese Option erlaubt es, Schaltflächen für das Starten und Stoppen des Videos hinzuzufügen. Du kannst diese Buttons direkt in Webflow nach deinen Wünschen gestalten und anpassen. Oder du lädst eigene Button Icons hoch.

Diese Option ist nicht mit dem Webflow CMS kompatibel

Lightbox

Die Integration von Videos über Plattformen wie YouTube oder Vimeo hat viele Vorteile, kann aber auch die Ladezeit deiner Webseite beeinträchtigen. Für eine reibungslose Nutzererfahrung ist daher die Verwendung von Lightbox für Videos von Drittanbietern mein persönlicher Favorit.

Bei einem Klick auf den Lightbox-Link, oft repräsentiert durch ein Vorschaubild des Videos, öffnet sich das Video in einem Pop-Up und nimmt den gesamten Bildschirm ein. Ein Klick genügt, und der Nutzer kann das Video problemlos wieder schließen. Das Vorschaubild kann individuell angepasst und eingefügt werden - passend zu deinem Websitestil.

Du kannst diese Option ebenso verwenden, um Videos aus deinem Webflow CMS zu präsentieren.

Wistia

Wenn es um das Einbetten von Videos in Webflow geht, ist Wistia eine weitere Option neben bekannten Plattformen wie YouTube oder Vimeo. Hier sind die wichtigsten Punkte, die du über Wistia wissen solltest:

1. Integration: Das Einbinden von Wistia-Videos in Webflow ist unkompliziert und erfolgt über den Embed-Code.
2. Design & Benutzerfreundlichkeit: Wistia punktet mit einem ästhetisch ansprechenden Design und einer nutzerfreundlichen Oberfläche, die oft als überlegen gegenüber Vimeo angesehen wird.
3. Kostenfaktor: Ein wesentlicher Nachteil von Wistia sind die Kosten. Die Plattform kann, je nach Nutzungsumfang, deutlich teurer sein als andere Anbieter.

Add-On für Fortgeschrittene: Videos mit HTML einfügen

1. Video hochladen: Lade zuerst das gewünschte Background-Video auf einer Unterseite deiner Webflow-Website hoch und veröffentliche diese.
2. Video-Pfad finden: Öffne deinen bevorzugten Browser und nutze die Entwicklertools, um das Element zu inspizieren, in welchem das Background-Video liegt. Suche im Code nach dem Source-Element des Background-Videos. Hier findest du den Pfad (URL) zu dem gerade hochgeladenen Video.
3. Embed erstellen: Gehe zurück zu Webflow und erstelle dort, wo das Video erscheinen soll, ein Embed-Element.
4. Code einfügen: Füge in das Embed-Element den folgenden Code ein:

<div data-video-urls="PFAD DES VIDEOS" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="background-video w-background-video w-background-video-atom"><video id="" autoplay="" loop="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="PFAD DES VIDEOS" data-wf-ignore="true"></video></div>

Wichtig: Ersetze dabei "PFAD DES VIDEOS" durch den zuvor gefundenen Pfad deines Videos.

Dieser Ansatz lässt sich auch problemlos mit dem Webflow CMS kombinieren. Hierfür musst du lediglich den Videopfad dynamisch aus deinem CMS beziehen und in den Embed-Code integrieren.

Durch die Verwendung des HTML-Tags <video> erlangst du mehr Kontrolle über die Darstellung und das Verhalten deiner Videos und kannst diese optimal an die Anforderungen deiner Webseite anpassen.

Use Cases um in Webflow ein Video einzubinden

Imagefilme: Das Einbinden von Imagefilmen in Webflow hilft Unternehmen, ihre Marke visuell zu stärken und eine emotionale Verbindung mit dem Publikum aufzubauen.

Kundentestimonials: Kundentestimonials verleihen Glaubwürdigkeit und bauen Vertrauen auf. Eine effektive Methode ist, diese Erfahrungsberichte direkt in Webflow zu integrieren.

Erklärvideos: Erklärvideos vereinfachen die Darstellung komplexer Informationen und machen Produkte oder Dienstleistungen leichter verständlich.

Case Studies: Case Studies demonstrieren detailliert den Erfolg und die Effektivität von Angeboten und sind ein wichtiges Element für die Inhaltsstrategie.

Als visuelle Elemente: Das Einbinden von Videos als visuelle Elemente verbessert nicht nur die Ästhetik der Website, sondern hebt auch wichtige Inhalte auf ansprechende Weise hervor, wobei das "Webflow Video einbinden" eine Schlüsselrolle spielt.

‍

Jetzt mit Webflow starten*

Mit Sternchen * markierte Links sind Affiliate-Links.