Webflow CMS-Hintergrundvideo mit dem Custom Element (ohne Embeds)

Heute bauen wir CMS-gesteuerte Hintergrundvideos für Ihre Webflow-Projekte. Dank Custom Elements bekommen Sie ein natives Hintergrund- <video> ganz ohne eigenen Code und ohne Embeds. Am Ende des Beitrags finden Sie außerdem ein praktisches Cloneable zum Klonen und ein kurzes Video, das alles erklärt.

Was ist eigentlich ein Hintergrundvideo?

Kurz gesagt: ein stummes, sich wiederholendes, meist eher kleines Video, das in der Regel automatisch startet und hinter etwas anderem läuft. Es ist der unbesungene Held des Webdesigns, der unermüdlich im Hintergrund arbeitet. Möchten Sie einen Eindruck bekommen?

Wichtig sind hier Autoplay, Muted und Loop. Die Lösung in Webflow ist normalerweise ganz einfach: ein Hintergrundvideo-Element hinzufügen, ein kleines Video hochladen, fertig. Nur funktioniert das auf CMS-Seiten oder in Collection Lists nicht, weil die Datei direkt auf das Element hochgeladen wird, statt aus einem CMS-Feld zu kommen. Was nun? Üblicherweise greift man zu eigenem Embed-Code, entweder für ein  <video> oder ein <iframe> (und das haben wir in einem anderen Beitrag hier behandelt). Doch seit es das Custom Element in Webflow gibt, können wir ein Video-Element einfach aus mindestens zwei Custom Elements bauen (vielleicht auch mehr): eines für das Video und je eines für jede Quelle darin.

Aber zuerst sprechen wir über iframe gegen video.

Die Optionen abwägen

Ob ein  <video>-Tag oder ein iframe besser passt, hängt von Ihren konkreten Anforderungen ab:

Wenn Ihnen Leistung und direkte Kontrolle über Ihre Videoinhalte mit besseren SEO-Aussichten wichtig sind, wählen Sie das  <video>-Tag.
Wenn Einfachheit, Zugriff auf plattformspezifische Funktionen und zusätzliche Sicherheit Ihre Prioritäten sind, ist ein iframe vielleicht der richtige Weg.

Beide Ansätze haben ihren Platz im Werkzeugkasten von Webdesignern, und die richtige Wahl hängt vom Zusammenspiel aus Kontrolle, Leistung und Funktionsumfang in Ihrem Projekt ab. Ich würde sagen, iframes laden langsamer, und wenn Sie etwa Vimeo als Videoquelle nutzen, kann die Qualität leiden, weil Sie keine Kontrolle über adaptive Bitraten und Ähnliches haben. Wenn Sie Vimeo trotzdem als Quelle möchten: Wir haben auch darüber geschrieben, wie man Vimeo-Hintergrundvideos in Webflow mit Intersection-Code optimiert.

Das Custom Element: Webflows Gamechanger

Webflows Custom Element ist wie ein Geheimgang in einem Videospiel, der zu verborgenen Schätzen führt. Damit erstellen wir HTML-Elemente direkt auf der Canvas, auch solche, die Webflow nicht nativ anbietet, und sobald es in einer Collection List sitzt, können Sie es an CMS-Felder, Attribute, Tags und Text binden. Einen genaueren Blick bietet Webflows Anleitung zum Custom Element. Dieses kleine Juwel ist unser Weg, CMS-gesteuerte Videos als Hintergrundelemente einzubinden. (Wenn Sie weitere Tricks zur CMS-Bindung suchen, lesen Sie unseren Beitrag zum Erstellen von Text-Spans in dynamischen CMS-Textelementen.)

Ihr CMS-gesteuertes Hintergrundvideo aufbauen

Schritt 1: Die CMS-Collection einrichten

Beginnen Sie mit einer CMS-Collection, die Ihre Videodateien enthält. Stellen Sie sich das als Ihre Videobibliothek vor, in der jedes Buch eine fesselnde Geschichte erzählt. Sie brauchen lediglich die Download-URLs von Vimeo. Klicken Sie in Vimeo auf die Videodatei-Links und wechseln Sie zu den Download-Links statt der Player-Links, da die Player-Links ablaufen. (Eine Korrektur aus 2026: Dieser letzte Grund stimmt nicht mehr. Vimeo sagt, dass Player-Links für Drittanbieter (Videodatei-Links, dann Video abspielen) nicht ablaufen. Gut zu wissen: Vimeo bietet diese direkten Links nur im Standard-Tarif oder höher an, und wenn Sie herabstufen, funktionieren eingebettete Links nicht mehr, bis Sie wieder upgraden. Quelle: help.vimeo.com/hc/en-us/articles/12426150952593.) Üblicherweise fügen Sie für jedes Video drei Dateien hinzu, es funktioniert aber auch mit einer: hohe Qualität, mittlere und niedrige. Gehen Sie sparsam mit der hohen um, denn ein 4K-Video kann die Performance der Website komplett ruinieren. (Eine Korrektur aus 2026: Browser wählen nicht automatisch die beste Qualität für Sie. MDN sagt: “Der Browser geht eine Liste von <source>-Elementen durch, um ein Format zu finden, das er unterstützt. Er verwendet das erste, das er anzeigen kann.” Die Reihenfolge Ihrer Source-Elemente ist also wichtig, setzen Sie die Datei, die am liebsten abgespielt werden soll, an die erste Stelle.)

Schritt 2: Custom Elements einsetzen

Ist die Bühne bereitet, nutzen wir Custom Elements, um ein natives HTML5- <video> -Tag zu erstellen, das dynamisch mit unseren CMS-Einträgen verknüpft ist. Stellen Sie sich vor, Sie zaubern einen Videoplayer aus dem Nichts, angetrieben von der Magie von Webflow und Ihrem CMS. Mit dem eben beschriebenen Aufbau brauchen Sie vier Custom Elements: das Video und darin drei Source-Elemente.

Das Video-Element

Sobald die Struktur steht, vergeben Sie die Tags für die vier Elemente: das äußere ist video, die inneren sind source.

Das Video-Element

Hier sehen Sie, dass wir über Attribute loop=true, muted=true und playsinline=true gesetzt haben, der Rest ist nur Beiwerk. (Sie sollten außerdem autoplay=true am Video setzen, denn dadurch startet es von selbst. Browser blockieren Autoplay bei Videos mit Ton in der Regel, deshalb sorgt muted=true dafür, dass es von selbst starten darf.)

Das Source-Element

Sie sehen, dass wir die URL per Attribut an src binden. Das und der type sind am wichtigsten.

Das src-Attribut

Schritt 3: Gestalten und einbetten

Als Nächstes gestalten wir unser Video so, dass es perfekt als Hintergrundelement passt und Ihr Design ergänzt, ohne es zu erdrücken. Es ist, als zögen Sie Ihrem Video den Sonntagsanzug an. Beim Cloneable haben wir eine Box im Format 16:9 um das Video gelegt und das Video auf absolute und cover gesetzt, damit es die Box ausfüllt, egal wie groß das Video ist. Das hängt letztlich davon ab, was Sie erreichen wollten.

Das Cloneable holen

Weil wir gern teilen (und Ihnen Zeit sparen), haben wir ein klonbares Webflow-Projekt zusammengestellt. Es ist, als drückten wir Ihnen die Schlüssel zum Königreich in die Hand: einfach holen, klonen und nach Herzenslust anpassen. Weitere finden Sie in unseren Webflow-Cloneables.

Es gibt auch ein Video, in dem ich das Cloneable durchquatsche, aber Sie kommen auch so zurecht. Viel Spaß, hinterlassen Sie einen Kommentar, wenn Sie Fragen haben, wir versuchen zu antworten, und in diesem Beitrag steht mehr dazu, wie man dasselbe mit eigenem Code löst. Sie suchen einen weiteren CMS-gesteuerten Trick? Dann schauen Sie sich unsere CMS-gesteuerten Hintergrundverläufe oder unser CMS-gesteuertes Ticker-Band an.

Häufig gestellte Fragen

Kann ich ein CMS-Feld für ein Webflow-Hintergrundvideo verwenden?

Nicht direkt mit dem integrierten Hintergrundvideo-Element. Webflow beschreibt es als Komponente, auf die Sie eine Videodatei hochladen, und nicht als eine, die aus einem CMS-Feld gespeist wird. Der oben gezeigte Custom-Element-Ansatz umgeht das, weil die Video-URLs aus Ihrem Collection-Eintrag stammen und die Elemente daran gebunden sind.

Wie groß darf ein Webflow-Hintergrundvideo sein?

Webflows integriertes Hintergrundvideo akzeptiert Dateien unter 30 MB im Format webm, mp4, mov oder ogg. Bei der Custom-Element-Methode liegen die Dateien bei Vimeo (oder wo immer Sie sie hosten), deshalb gilt dieses Limit nicht, aber kleiner ist trotzdem besser: Halten Sie die Dateien kurz, komprimiert und niedrig aufgelöst.

Startet ein CMS-Hintergrundvideo auf dem Handy automatisch?

Meistens ja, solange autoplay, muted und playsinline gesetzt sind. Browser blockieren Autoplay bei Videos mit Ton, deshalb ist muted wichtig. Bedenken Sie, dass Webflows eigene Hintergrundvideo-Komponente eine Play/Pause-Schaltfläche hinzufügt und bei Besuchern mit aktivierter reduzierter Bewegung stoppt. Ein Custom-Element-Video macht beides nicht von selbst, fügen Sie also Ihre eigene Pause-Steuerung hinzu, wenn das Video groß oder ablenkend ist.