Webflow CMS-Hintergrundvideo: pro Item ein anderes Video abspielen

Update, Oktober 2026: Inzwischen hat sich einiges getan. Den neueren Ansatz findest du in Creating CMS-Powered Background Videos in Webflow using the Custom Element. Der Rest dieses Beitrags bleibt als Dokumentation stehen, wie wir es damals gemacht haben.

Warum du das überhaupt machen willst? Vielleicht soll im Hero-Bereich der Template-Seite einer CMS Collection ein jeweils anderes Hintergrundvideo laufen. Oder du hast eine Collection List auf einer Seite und brauchst in jedem Item ein anderes Video. Bei uns, als Webflow-Studio, war es ein aktuelles Kundenprojekt: Der Hero-Bereich der Startseite sollte sich je nach Wochentag ändern und jeden Tag ein anderes Video als Hintergrundelement abspielen (wie wir das Video abhängig vom Wochentag abspielen, zeigen wir in einem kommenden Beitrag), und dasselbe Video sollte dann auch auf der Collection-List-Seite des jeweiligen Anlasses laufen. Die CMS Items sollten also bestimmen, welches Video läuft, aber mit dem Standard-Background-Video-Element von Webflow ging das nicht, also haben wir es so gelöst:

Wir zeigen dir, wie du den Hintergrund zu einem CMS Item hinzufügst, indem du ihn in einem Background-Video-Element zu Webflow hochlädst. Mit einem HTML-Embed-Element bringen wir das Video dann in das Collection List Item auf der Template-Seite oder im Collection-List-Element auf einer Seite, und zum Schluss verstecken wir das ursprüngliche Hintergrundelement, damit es beim Veröffentlichen nicht einfach verschwindet. Milk Moon Studio ist ein kleines Webflow-Studio, deshalb mögen wir es einfach und Low-Code, und genau das zeigen wir dir hier.

Es gibt allerdings zwei Denkschulen, wie man das angehen kann. Wir nehmen die erste, aber du kannst gern die zweite ausprobieren, also listen wir beide auf.

Du lädst die Videos, die du verwenden willst, in einem Background-Video-Element zu Webflow hoch, das am Ende versteckt wird, damit die Videos in deinem Projekt bleiben. So kannst du die native Funktion gewissermaßen weiter nutzen, mit einem kleinen Hack. Webflow transkodiert das Video trotzdem und gibt es als WebM und MP4 aus. Du verwendest beide und lässt den Browser der Nutzerin oder des Nutzers entscheiden, welches auf der Seite abgespielt wird, je nachdem, was er unterstützt. Außerdem nutzt du das AWS-CDN von Webflow, um die Inhalte in den Rechenzentren von Amazon zu hosten.
Der zweite Ansatz funktioniert beim Einrichten des Embeds und eines Felds, das in deiner Collection List auf das Video verweist, genauso, aber du hostest das Video nicht bei Webflow. Stattdessen holst du dir einen Vimeo-Account. Damit kannst du die Embed-Einstellungen anpassen usw. und verweist dann im CMS Item auf das Video. Statt eines von Webflow transkodierten WebM- oder MP4-Videos lässt du dann ein Vimeo-Video im Hintergrund in Endlosschleife laufen. Der Code unterscheidet sich ein wenig, dazu am Ende des Beitrags mehr. Wir haben kürzlich außerdem einen Beitrag veröffentlicht, in dem es darum geht, Vimeo-Hintergrundvideo-Embeds mit Intersection-Observer-Code zu steuern und zu optimieren, schau dir den also auch an.
Option 3, ja, wir haben zwei gesagt, aber es sind drei. Kombiniere Option eins und zwei. Hol dir einen Vimeo-Pro-Account, damit du die URLs der Videos bei Vimeo bekommst, und verwende dann den Embed-Code, den wir für Option eins liefern, mit den Vimeo-Video-Links, statt wie bei Option 2 die Vimeo-IDs zu nutzen. Diese Variante behandeln wir nicht, das kriegst du schon hin.

Also, legen wir mit der Webflow-Methode los:

Schritt 1: Deine CMS Collection einrichten

Du brauchst zwei Felder, eines für die URL des MP4-Videos und eines für die des WebM-Videos.

Lege 2 Felder vom Typ Plain Text an, eines namens MP4, eines namens WebM.

Eigene Videofelder in deinem Webflow CMS einrichten

Damit ist die Einrichtung der CMS Collection List erledigt. Natürlich kannst du alle weiteren Felder hinzufügen, die du in der Collection List brauchst.

Schritt 2: Das Background-Video-Element auf der CMS-Template-Seite oder im Collection List Item einrichten

Geh zu dem Element, in dem das Video erscheinen soll. Das kann ein Collection List Item auf einer statischen Seite sein oder eine CMS-Template-Seite. Du brauchst einen Wrapper für das Video, also zieh ein Div rein, wir nennen es video cover.
Setz das Div auf relative und gib ihm die Größe, die du dem Background-Video-Element gegeben hättest, wenn du es hättest verwenden können. Wenn du Text oder Ähnliches über dem Video haben willst, muss auch das Element, in dem dieses Div liegt, auf relative stehen, damit du die Ebenen per z-index stapeln kannst. Bei uns hat der Video-Wrapper den Wert 1 und der Inhalt darüber den Wert 2, so liegen die Ebenen sauber übereinander und das Video ist unten.

Z-Index für das Cover-Video-Div setzen

Wir haben im Screenshot alles ordentlich benannt, damit du siehst, wie wir die Ebenen gestapelt haben. Video cover ist das Wrapper-Div, das das Embed-Element enthält. Darüber liegt ein Farb-Overlay mit 20 % Schwarz-Deckkraft, damit die Kompression weniger auffällt (mehr dazu in den Tipps am Ende), und darauf sitzt der Text. Das Farb-Overlay macht den Text außerdem besser lesbar, denn einige unserer Videos enthalten weiße Elemente. Unser Video-cover-Div ist außerdem auf Absolute Positioning mit 100 % Breite und Höhe gesetzt, es soll den gesamten Hintergrund des Hero-Bereichs auf dieser Seite ausfüllen.

Zieh jetzt ein HTML Embed in deinen Video-Wrapper. Es enthält den Code, der das Ganze zum Laufen bringt:

Webflow Background Video Embed

Füge den folgenden Code ein und wähle die MP4- und WebM-Felder aus, die du vorhin angelegt hast.

HTML-Embed-Code in Webflow für Hintergrundvideo aus dem CMS

Was passiert hier also? Das Embed spielt ein Inline-Hintergrundvideo in Endlosschleife ab. Wenn der Browser HTML5-Video und WebM unterstützt, nimmt er WebM, andernfalls greift er auf das MP4-Video zurück.

Damit ist das CMS-Setup fertig, aber woher bekommen wir die URLs der Videos, die wir in die CMS Items der Collection List eintragen müssen?

Diagramm der Ebenen im Hero-Bereich: Inhalt mit z-index 2 oben, ein schwarzes Farb-Overlay mit 20 % Deckkraft und darunter das Video-Cover-Div mit z-index 1

Schritt 3: Die Video-URLs besorgen

Der nicht so schöne Teil. Du kannst die Videos nicht einfach hochladen, Webflow muss sie transkodieren und ins CDN legen. Am einfachsten geht das so: Lege eine statische Seite an, zieh für jedes benötigte Video ein Background-Video-Element rein, füge die Videos den Background-Video-Elementen hinzu und veröffentliche die Seite. Öffne die veröffentlichte Seite und sieh dir den Code an. Jedes hochgeladene Video hat eine MP4- und eine WebM-Video-URL (warte damit, bis Webflow die Videos komprimiert hat). Kopiere die WebM- und die MP4-URL für jedes Background-Video-Element und füge sie in die beiden Videofelder des passenden CMS Items ein, die du in Schritt 1 angelegt hast.

Sehr wichtig: Lösche die Background-Video-Elemente, die du gerade erstellt hast, nicht. Sie müssen in Webflow bleiben, solange du die Videos im CMS brauchst. Stell einfach die statische Seite, die du angelegt hast, auf Draft, um sie aus dem Live-Projekt zu nehmen, dann passt alles. Die Seite ist auf der veröffentlichten Website nicht sichtbar, aber die Video-Assets bleiben erhalten.

Das war's, du bist fertig, schau dir die veröffentlichten Videos in der Vorschau an.

Tipps für bessere Hintergrundvideos

Komprimiere das Video, bis es quietscht. Webflow transkodiert das Video und spuckt eine WebM-Version aus, aber du solltest vorher selbst komprimieren. Nutzbarkeit ist entscheidend, und du willst den Browser der Nutzer nicht ausbremsen, also fang klein an. Wir empfehlen Handbrake. Es ist kostenlos, und du kannst einen Tag lang an den Einstellungen feilen, bis es passt. Wir haben oft gelesen, dass man etwa 720p anpeilen sollte, mit niedriger Bildrate von rund 25 Bildern pro Sekunde und Bitraten zwischen 750k und 1250k, und dann die niedrigste wählt, die du noch für akzeptabel hältst. Du kannst es noch etwas weiter drücken und die nächsten beiden Kniffe ausprobieren, sobald die Videos in Webflow liegen.
Farb-Overlay. Du brauchst ein großes Video, aber nachdem du es auf die gewünschte Größe gebracht hast, sieht es nicht mehr so toll aus. Leg ein schwarzes Overlay über das Video und stell die Transparenz so ein, dass du das Video noch siehst, das Overlay aber die Kompression, die du angewendet hast, abmildert.
Blur. Wie oben: Leg ein Div über das Video-Element und wende einen Blur an, um die Artefakte der Kompression weichzuzeichnen.
Auch Muster-Overlays können helfen, setz die Transparenz des Musters so niedrig wie möglich, sodass die Artefakte trotzdem verdeckt bleiben.
Wenn es schwerfällt, die Dateigröße klein zu halten, nimm ein sehr kurzes Video, das sich perfekt loopen lässt. Je kürzer das Video, desto kleiner die Datei, und wenn du etwas findest, bei dem Anfang und Ende zusammenpassen, fällt der Loop weniger auf.
Vermeide Bewegung, was widersprüchlich klingt, wenn man ein Video einsetzen will, das ja von Natur aus Bewegung enthält. Wir meinen damit schnelle Bewegungen, verwackelte Aufnahmen und Ähnliches.
Wer etwas mutiger ist, kann das Video per JavaScript nach einer bestimmten Anzahl von Loops auch pausieren, das entlastet den Browser.
Wenn du dir wegen Mobilgeräten Sorgen machst, setz das Video auf Mobilgeräten auf display: none und nimm stattdessen ein statisches Bild oder ein winziges GIF (wir sagen Jif).
Wenn du dich mit Handbrake oder einer ähnlichen App für die Kompression nicht sicher fühlst, empfiehlt Webflow Clipchamp. Beachte nur: Als wir das geschrieben haben, exportierte der Free-Plan nur in SD, inzwischen sind es bis zu 1080p.

Die Vimeo-Methode

Für Vimeo brauchst du einen kostenpflichtigen Account, um die IDs für das Embed zu bekommen, und es ist schwieriger, damit eine Fläche zu füllen, weil das Element am ursprünglichen Seitenverhältnis festhalten will. Keine Sorge, der Hack, den sie hier haben funktioniert sehr gut, schau ihn dir an. Wir haben ihn auch verwendet, mit ein paar kleinen Anpassungen hier und da.

Es gibt einige verschiedene Vimeo-Umsetzungen für den HTML-Embed-Code. Er sieht ungefähr so aus:

Denk daran, noch einmal zu prüfen, ob die Fläche auf allen Geräte-Breakpoints richtig abgedeckt wird.

Uns ist aufgefallen, dass die Vimeo-Methode in den PageSpeed-Ergebnissen manchmal langsamer abschneidet, die Time to Interaction, also der Zeitpunkt, ab dem man die Seite tatsächlich benutzen kann, dagegen etwas schneller ist, das Video selbst wegen der iframes aber etwas länger zum Laden braucht. Welche Option ihnen besser gefällt, überlassen wir den Webflow-Expertinnen und -Experten.

Wir sagen nur so viel: Manchmal funktioniert ein Video-Element mit Vimeo besser. Zum Beispiel so:

Hier hast du mehr Kontrolle, weil das adaptive Bitrate-Streaming von Vimeo usw. nicht greift. Sei dir nur bewusst, dass es etwas mehr Arbeit ist: In diesem Beispiel trägst du für die Datei drei URLs von Vimeo ein statt nur der Vimeo-ID. Achte außerdem darauf, dass du beim Kopieren der URLs von der Vimeo-Seite deines Videos die Vimeo-Download-URLs verwendest und nicht die Player-URLs, denn die Player-URLs laufen nach 2 Tagen ab. Klick einfach auf den Videonamen, hol dir die Links aus dem Dropdown und denk dran: die Download-URLs. Welche du wählst, liegt bei dir und hängt von der Qualität der hochgeladenen Datei ab, meistens nimmst du eine in hoher, mittlerer und niedriger Qualität, aber du kannst auch mehr hinzufügen, das ist dir überlassen.

Wir haben außerdem einen neueren Beitrag speziell zum Thema Vimeo-Hintergrundvideos und Intersection-Observer-Code, um Videos und andere Elemente der Website abhängig vom Videostatus zu optimieren und zu steuern, schau dir den also auch an. Für die Video-Tags kannst du aber auch das Play-and-Pause-Skript von Finsweet nutzen, um die Performance zu verbessern: Es spielt die Videos einfach ab, wenn sie im Viewport sind, und pausiert sie, sobald sie ihn verlassen.

So geht das mit der Collection List. Wenn du lieber den Weg über das Custom Element gehen willst, haben wir das in unserem neueren Beitrag zu CMS-gesteuerten Hintergrundvideos mit dem Custom Element beschrieben. Und wenn du solche CMS-Tricks magst, passen unsere Beiträge zu CMS-gesteuerten Hintergrundverläufen in Webflow und zum Erstellen von Text-Spans in dynamischen CMS-Textelementen genau in dieselbe Richtung.

Häufige Fragen zu Videos in Webflow

Wie lade ich ein Video zu Webflow hoch?

Du kannst eine Videodatei als Hintergrundvideo zu Webflow hochladen, aber nicht in das Standard-Video-Element. Das Video-Element nimmt nur Links von Seiten wie YouTube und Vimeo an, während das Background-Video-Element Dateien unter 30 MB in den Formaten WebM, MP4, MOV oder OGG akzeptiert und sie für dich zu MP4 und WebM transkodiert. Details findest du im Webflow-Hilfeartikel zu Background Styles.

Wie füge ich jedem CMS Item in Webflow ein anderes Hintergrundvideo hinzu?

Füge deiner Collection zwei Plain-Text-Felder für die MP4- und WebM-URLs hinzu, lade jedes Video einmal in einem Background-Video-Element auf einer Seite hoch, die du im Draft lässt, trage dann die veröffentlichten URLs in die CMS Items ein und spiele die Videos mit einem HTML Embed im Collection List Item ab. Schritt 1 bis 3 oben führen dich durch den Ablauf.

Wie groß sollte ein Hintergrundvideo in Webflow sein?

Halte es klein: etwa 720p, rund 25 Bilder pro Sekunde und eine Bitrate zwischen 750k und 1250k, vor dem Hochladen komprimiert. Das Background-Video-Element von Webflow hat außerdem ein Dateilimit von 30 MB, ein kurzes Video, das sich perfekt loopen lässt, ist also dein Freund.

Sollte ich Hintergrundvideos bei Webflow oder bei Vimeo hosten?

Das hängt vom Projekt ab, deshalb überlassen wir es dir. In unseren Tests schneidet die Vimeo-Methode bei den PageSpeed-Ergebnissen manchmal langsamer ab, erreicht aber die Time to Interaction etwas schneller, während das Video selbst wegen der iframes etwas länger zum Laden braucht.

Wenn du Fragen hast, hinterlass gern einen Kommentar, und wenn du weitere Anleitungen suchst, wirf einen Blick in unseren How-To-Bereich.