Vimeo-Hintergrundvideo in Webflow: Optimieren mit Object Intersect

Wir hatten kürzlich den Auftrag, eine neue Website für eine Videoproduktionsfirma zu gestalten und zu bauen, und damit kam der großflächige Einsatz von Hintergrundvideos. Am Ende haben wir uns für Vimeo-Hintergrundvideos entschieden, statt für Webflow-Hintergrundvideos oder externe Anbieter. Externe Anbieter schieden aus, weil die Firma dafür bereits einen Dienst hatte, aber die Performance war… naja. Webflow-Hintergrundvideos schieden aus, weil:

Zu schwer für den Kunden zu ändern.
Alles sollte einfach zu pflegen sein, also per CMS, und Webflow-Hintergrundvideos und CMS vertragen sich nicht.
Sie hatten bereits einen Vimeo-Pro-Account mit ein paar hundert TV-Spots und Ähnlichem, die wir samt Metadaten, Beschreibungen, Titeln und allem anderen einfach in das Webflow-CMS importieren konnten.

Vimeo-Hintergrundvideos lassen sich überraschend einfach in Webflow umsetzen:

Alles, was du zum Loslegen wirklich brauchst, ist die src: Füge die Vimeo-ID und den darauffolgenden Query-String hinzu, damit das Video abgespielt wird, in Schleife läuft und stumm bleibt. Hier noch eine Erklärung zum Rest, falls du genau wissen willst, was da passiert:

Der HTML-Code erstellt ein iframe-Element mit der ID „vimeo-video“. Hier wird das Vimeo-Video auf der Seite eingebettet. Das ist wichtig, denn unser erster Object-Intersect-Observer sucht nach „vimeo-video“.
Das Attribut „loading“ ist auf „eager“ gesetzt, was dem Browser sagt, dass er das iframe und seinen Inhalt so früh wie möglich laden soll, ohne auf den Rest der Seite zu warten. Es liegt above the fold, also wollen wir es schnell.
Das Attribut „preload“ ist auf „auto“ gesetzt, was dem Browser sagt, dass er die Videodatei vorab laden soll, damit sie so früh wie möglich starten kann. Gleicher Grund wie oben.
Das Attribut „title“ setzt den Titel des iframes auf „Name“.
Das Attribut „src“ enthält die URL des Vimeo-Videos mit zusätzlichen Parametern. Der Parameter „background=1“ sorgt dafür, dass das Video als Hintergrundvideo abgespielt wird, und „loop=1“ lässt es endlos wiederholen. Der Parameter „autopause=0“ verhindert, dass der Vimeo-Player dieses Video pausiert, wenn auf derselben Seite ein anderes Vimeo-Video startet (standardmäßig spielt der Player immer nur ein Video gleichzeitig), und „muted=1“ spielt das Video ohne Ton ab. Der Parameter „quality=auto“ passt die Videoqualität automatisch an die Verbindungsgeschwindigkeit des Nutzers an. „responsive=1“ macht das Video responsiv für unterschiedliche Bildschirmgrößen. Der Parameter „dnt=1“ verhindert, dass der Vimeo-Player Sitzungsdaten und Analysen erfasst, sodass keine Analytics-Daten getrackt werden (laut Vimeo bleiben einige essenzielle Cookies aktiv).
Das Attribut „style“ setzt die Hintergrundfarbe des iframes auf Weiß.
Die Attribute „width“ und „height“ sind auf 100 % gesetzt, damit das iframe die gesamte Breite und Höhe seines Containers ausfüllt.
Das Attribut „frameborder“ ist auf 0 gesetzt, um den Rahmen um das iframe zu entfernen.
Das Attribut „allow“ erlaubt dem iframe, automatisch abzuspielen und in den Vollbildmodus zu wechseln.
Das Attribut „allowfullscreen“ erlaubt dem iframe, in den Vollbildmodus zu wechseln.

Du kannst auch ein Video-Element verwenden, und wir haben dazu einen ausführlichen Beitrag über CMS-gesteuerte Hintergrundvideos geschrieben (auf Englisch), falls du mehr Details dazu willst, wie man das in Collection Lists einbaut. Iframes und Video-Elemente haben beide ihre Vor- und Nachteile.

Iframe-Einbettungen sind eine gängige Art, Vimeo-Videos auf einer Website einzubinden, und sie haben einige Vorteile. Einer der wichtigsten: iframes werden asynchron geladen, sodass der Rest der Seite unabhängig vom Video laden kann. Das kann die Ladezeiten verbessern, vor allem bei langsameren Verbindungen. Allerdings können iframes auch langsamer rendern und die Performance der Website beeinträchtigen, vor allem wenn du viele Videos asynchron lädst und Interaktions-Trigger wie „Page loaded“ nutzt, besonders auf Mobilgeräten mit schwächeren Prozessoren.

Video-Element-Einbettungen können dagegen performanter sein als iframes, weil sie Teil des DOM der Seite sind und sich direkter per JavaScript steuern lassen, außerdem lassen sie sich leicht cachen. Dadurch lassen sich Video-Elemente für schnelleres Abspielen und bessere Performance optimieren, besonders auf Mobilgeräten. Sie sind aber auch aufwendiger einzurichten und brauchen mehr Code zur Steuerung, und anders als bei einem Vimeo-iframe kannst du sie nicht einfach mit der Vimeo-Video-ID füllen.

Am Ende haben wir uns für das iframe entschieden, weil der Social-Media-Manager der Firma die Website pflegen würde und er dafür nur die Vimeo-Video-ID und das Webflow-CMS braucht. Wir brauchten aber mehr Kontrolle, um das Erlebnis zu optimieren, erstens, weil wir zwar Empfehlungen zu Größe und Qualität geben können, aber keine Garantie besteht, dass sich jemand daran hält, und zweitens, weil einige der Seiten für ihre Regisseure Hunderte von Hintergrundvideos enthielten, die den Browser auf einem schwachen Rechner oder Smartphone locker lahmlegen würden.

Die Lösung: Object Intersect Code. Was das ist, fragst du dich, und zu Recht. Er wird oft eingesetzt, ist aber nichts, womit sich Leute in der No-Code-Entwicklung groß beschäftigen müssen. Wir sagen immer, dass Milk Moon Studio zuerst ein Webflow-Studio ist, wir mögen Low- und No-Code, und überhaupt hält jeder Webflow-Experte die Dinge gern einfach.

Object Intersect Code ist eine Technik in der Webentwicklung, mit der sich Aktionen auslösen lassen, wenn ein bestimmtes Objekt auf dem Bildschirm auftaucht oder sich mit dem sichtbaren Bereich überschneidet.

Diagramm eines Viewports: der Vimeo-Video-Container darin lädt, die beiden Container außerhalb haben kein src und laden nicht

Im Zusammenhang mit Vimeo-Hintergrundvideos in Webflow kannst du mit Object Intersect Code die Wiedergabe des Videos steuern. Zum Beispiel möchtest du vielleicht, dass das Video pausiert, sobald es aus dem Bild scrollt, oder erst dann startet, wenn es auf dem Bildschirm erscheint.

Mit Object Intersect Code stellst du sicher, dass die Videowiedergabe für deine Nutzer optimiert ist und die Ressourcen ihres Geräts nicht unnötig belastet. Außerdem kann es das gesamte Nutzererlebnis verbessern, indem die Wiedergabe flüssiger und reaktionsschneller wird.

Object Intersect Code sagt dir nur, was gerade auf dem Bildschirm zu sehen ist. Kombiniert mit der Vimeo-Player-API, die weiß, ob das Video gerade läuft oder pausiert ist, kannst du aber weitere Ereignisse auf der Website abhängig vom Zustand des Vimeo-Players auslösen. Du könntest mit der Player-API zum Beispiel erkennen, ob das Video gerade abgespielt oder pausiert wird, und dann darauf basierend andere Aktionen auslösen, etwa andere Elemente auf der Seite ein- oder ausblenden oder Animationen starten.

Wir zeigen dir ein paar Möglichkeiten, wie wir Object Intersect Code in diesem Projekt eingesetzt haben, um die Website zu optimieren und andere Elemente für ein besseres allgemeines Nutzererlebnis zu steuern.

Denk nur daran: Damit das alles funktioniert, musst du die Player-API laden:

Die Vimeo-Player-API als Trigger nutzen, wenn ein Vimeo-Video zu spielen beginnt

Wir starten mit dem, was wir auf der Startseite der Website gemacht haben: Wir haben die Vimeo-Player-API genutzt, um andere Elemente zu steuern, das Nutzererlebnis zu verbessern und Interaktionen auf den Start des Videos abzustimmen.

Zur Ausgangslage: Hinter einem scrollenden Logo läuft ein Showreel-Video als Hintergrund. Normalerweise ist das Timing recht einfach, du löst die Interaktion bei „Page loaded“ aus und fertig. Webflow weiß aber nicht, wann das Video geladen ist, weil die iframes asynchron laden. Also brauchten wir die Vimeo-Player-API, die beobachtet, wann das Video läuft, und dann das scrollende Logo startet. Der Code baut mit CSS-Animation einen scrollenden Marquee-Effekt auf einer Webseite auf und löst die Animation aus, sobald ein Vimeo-Video abgespielt wird. Das macht der Code im Einzelnen:

Der CSS-Code richtet eine Klasse „marquee-track“ ein, die ein Textelement absolut positioniert und per CSS-Animation horizontal scrollen lässt. Die Animation läuft rückwärts und dauert 30 Sekunden. Die Klasse hat anfangs eine Deckkraft von 0, damit sie auf der Seite ausgeblendet ist.
Der JavaScript-Code richtet einen Event-Listener ein, der darauf wartet, dass der Vimeo-Player abgespielt wird. Wenn das Play-Event ausgelöst wird, fügt das JavaScript dem Element „marquee-track“ die Klasse „start“ hinzu, was die CSS-Animation auslöst und den Text über die Seite scrollen lässt.

Hier sind die kompletten Styles und das Skript samt Markup, damit es etwas klarer wird. Der Kern des Ganzen ist aber, wie einfach es ist, die Vimeo-Player-Events zusammen mit dem Object Intersect Observer zu nutzen, um andere Elemente wie Loader auszulösen, zu verstecken oder einzublenden.

Vimeo-Hintergrundvideos per Lazy Loading laden, sobald sie im Viewport sind, mit dem Object Intersect Observer

Wie gesagt: Der obige Teil ist eher Nutzererlebnis, sieht schön aus, bringt aber bei der Performance nicht viel. Das Nächste ist dagegen hervorragend für die Performance, und genau das haben wir auf den Seiten mit Hunderten von Videos eingesetzt, um die Gesamtperformance und die Ladezeiten zu verbessern. Einer der Nachteile von iframes ist die fehlende direkte Kontrolle, wenn man nur den Embed nutzt. Der folgende Code gibt dir deshalb direkte Kontrolle darüber, wann das Video überhaupt zu laden beginnt:

Der HTML-Code erstellt einen Video-Container mit der ID „vimeo-video“. Hier wird das Vimeo-Video auf der Seite geladen. Im Grunde dasselbe wie das iframe oben, nur mit einer anderen ID.
Der JavaScript-Code wählt mit der Methode „querySelectorAll“ alle Video-Container auf der Seite aus.
Das Objekt „options“ legt die Parameter für die IntersectionObserver-API fest. Die Eigenschaft „root“ ist auf „null“ gesetzt, damit der Viewport als Root-Element dient. Die Eigenschaft „rootMargin“ ist auf „0px“ gesetzt, also kein Rand um das Root-Element. Die Eigenschaft „threshold“ ist auf 0.3 gesetzt, was angibt, welcher Anteil (30 %) des Video-Containers im Viewport sichtbar sein muss, bevor das Video zu laden beginnt.
Die Variable „videoObserver“ erstellt eine neue IntersectionObserver-Instanz mit einer Callback-Funktion, die ausgeführt wird, wenn eine Überschneidung erkannt wird. Die Funktion erhält ein Array „entries“ und ein Objekt „observer“. Für jeden Eintrag prüft die Funktion mit der Eigenschaft „isIntersecting“, ob er sich mit dem Viewport überschneidet. Falls ja, holt die Funktion mit der Methode „querySelector“ das Vimeo-iframe im Container, liest mit „getAttribute“ die Video-Quell-URL aus dem Attribut „data-src“, setzt mit „setAttribute“ das iframe-Attribut „src“ auf diese URL und beendet mit „unobserve“ die Beobachtung des Containers.
Die Variable „videoContainers“ wird mit der Methode „forEach“ durchlaufen, um jeden Container einzeln anzusprechen. Für jeden Container holt die Funktion mit „querySelector“ das Vimeo-iframe im Container, liest mit „getAttribute“ die Video-Quell-URL aus dem Attribut „src“, setzt mit „setAttribute“ das Attribut „data-src“ auf diese URL, entfernt mit „removeAttribute“ das Attribut „src“ und beginnt mit der Methode „observe“ der IntersectionObserver-API, den Container zu beobachten.

Das Clevere daran: Du entfernst und setzt die src-URL im Grunde wieder ein, sodass Videos, die nicht im Viewport sind, gar nicht erst laden können. Das setzt Ressourcen frei, und zwar für genau die Videos, die gerade gebraucht werden.

Den Vimeo-Player nutzen, um Vimeo-Videos zu pausieren, wenn du ein Modal schließt

Diesen letzten Tipp werfe ich einfach mal hier rein. Er zeigt nur, wie nützlich die Steuerung über die Player-API ist, und hat nichts direkt mit dem Intersect Observer zu tun. Das Problem: Was machst du, wenn du ein Vimeo-Video in einem Modal hast? Beim Abspielen ist alles gut, aber wenn du das Modal einfach schließt, läuft das Video weiter, oder? Es ist kein Webflow-Video-Element, sondern ein normales Vimeo-Embed, also hat Webflow keine Kontrolle darüber. Genau das ist uns passiert, als wir ein Modal in einem Slider hatten. Du klickst auf einen Slide, das Modal öffnet sich, aber wenn du es schließt, läuft der Slider weiter und das Video auch, irgendwo im Hintergrund. Das will niemand.

Alles, was wir brauchten, um das Video zu pausieren, war das hier:

Der HTML-Code erstellt ein Video-Modal mit einem Schließen-Button. Hier wird das Vimeo-Video auf der Seite abgespielt.
Der JavaScript-Code wählt mit der Methode „querySelectorAll“ alle Schließen-Buttons auf der Seite aus.
Die Variable „closeButtons“ wird mit der Methode „forEach“ durchlaufen, um jeden Button einzeln anzusprechen. Für jeden Button fügt die Funktion mit der Methode „addEventListener“ einen Click-Event-Listener hinzu.
Die Event-Listener-Funktion holt mit „querySelectorAll“ und dem Klassen-Selektor „.modal-video“ alle Video-Modals auf der Seite.
Die Variable „modalVideos“ wird mit der Methode „forEach“ durchlaufen, um jedes Video-Modal einzeln anzusprechen. Für jedes Video-Modal holt die Funktion das Vimeo-iframe im Modal über die Eigenschaft „contentWindow“, die auf das Window-Objekt des iframes zugreift, und die Methode „postMessage“. Die Methode „postMessage“ sendet eine Nachricht an das iframe, hier ein JSON-Objekt, dessen Eigenschaft „method“ auf „pause“ gesetzt ist. Damit wird das Vimeo-Video pausiert, wenn das Modal geschlossen wird.

Insgesamt stellt dieser Code sicher, dass das Vimeo-Video im Modal pausiert wird, wenn du das Modal schließt, indem er mit der Methode „postMessage“ eine Nachricht mit der Methode „pause“ an das iframe schickt. So läuft das Video nicht im Hintergrund weiter und verbraucht keine unnötigen Ressourcen auf der Seite.

Wenn du das iframe lieber ganz weglassen möchtest: Wir haben auch über CMS-gesteuerte Hintergrundvideos mit dem Custom Element geschrieben (auf Englisch), das dir ein natives HTML5-Video-Element liefert. Und wenn du dich allgemein für Seitengeschwindigkeit interessierst, wirf einen Blick auf warum Seitengeschwindigkeit den Geschäftserfolg antreibt und auf unseren Leitfaden zum Cloudflare-Asset-Proxy und zur Optimierung (beide auf Englisch).

Fragen, die Leute zu Vimeo-Videos in Webflow stellen

Wie füge ich ein Vimeo-Video zu Webflow hinzu?

Zieh ein Embed-Element auf die Seite und füge ein Vimeo-iframe mit deiner Video-ID in der src ein, oder nutze Webflows eigenes Video-Element und gib ihm den Vimeo-Link. Für ein Hintergrundvideo bevorzugen wir das iframe, weil du damit Parameter an die src anhängen kannst, und darauf baut der Rest dieses Beitrags auf.

Wie bringe ich ein Vimeo-Video dazu, als Hintergrundvideo abzuspielen?

Hänge den Parameter „background=1“ ans Ende der src des Videos. Laut Vimeo deaktiviert das die Player-Steuerung, lässt das Video in Schleife laufen, spielt es automatisch ab und schaltet es stumm. Beachte aber, dass das Video laut Vimeo bei einem Starter-Account oder höher gehostet sein muss, ein kostenloser Account reicht dafür also nicht.

Wie lade ich Vimeo-Hintergrundvideos in Webflow per Lazy Loading?

Ersetze die „src“ des iframes durch ein „data-src“ und lass einen Intersection Observer die src wieder einsetzen, sobald der Container zu etwa 30 % sichtbar ist. Videos, die weit vom Viewport entfernt sind, laden so gar nicht erst, und genau das hat uns auf den Seiten mit Hunderten davon gerettet.

Wie pausiere ich ein Vimeo-Video, wenn ein Modal geschlossen wird?

Schick dem Vimeo-iframe per postMessage eine „pause“-Nachricht, wenn auf deinen Schließen-Button geklickt wird, genau wie im CodePen oben. Webflow kann ein normales Vimeo-Embed nicht für dich stoppen, du musst dem Player also selbst Bescheid geben.

Alles in allem also ein paar interessante Möglichkeiten, den Object Intersect Observer zu nutzen, um Hintergrundvideo-Inhalte in Webflow zu optimieren, plus wie du ein Video pausierst, wenn ein Modal geschlossen wird. Wir hoffen, das liefert dir Inspiration für dein nächstes Projekt, und mehr zu CMS-gesteuerten Hintergrundvideos findest du in diesem Beitrag. Außerdem findest du hier unseren How-to-Bereich mit allen How-to-Beiträgen und Videos, die wir erstellt haben. Wir versuchen, alles Low-Code, einfach und mit Bezug zu Webflow zu halten. Dazu gibt es eine schöne Anleitung zum Object Intersect Observer, samt einem netten Video, falls du ihn für mehr als nur Videos nutzen möchtest.

Vimeo-Hintergrundvideos in Webflow optimieren mit dem Intersection Observer

Die Vimeo-Player-API als Trigger nutzen, wenn ein Vimeo-Video zu spielen beginnt

Vimeo-Hintergrundvideos per Lazy Loading laden, sobald sie im Viewport sind, mit dem Object Intersect Observer

Den Vimeo-Player nutzen, um Vimeo-Videos zu pausieren, wenn du ein Modal schließt

Fragen, die Leute zu Vimeo-Videos in Webflow stellen

Wie füge ich ein Vimeo-Video zu Webflow hinzu?

Wie bringe ich ein Vimeo-Video dazu, als Hintergrundvideo abzuspielen?

Wie lade ich Vimeo-Hintergrundvideos in Webflow per Lazy Loading?

Wie pausiere ich ein Vimeo-Video, wenn ein Modal geschlossen wird?

Teilen

Alle Beiträge

So startest du jedes Webflow-Projekt mit der Webflow-Style-Guide-Vorlage

CSS-Blendmodi (mix-blend-mode) in Webflow mit Combo-Klassen hinzufügen

So fügen Sie in Webflow ein schließbares, sitzungsbasiertes Info-Banner hinzu (ohne Cookies)

Webdesign Rebels Unite. Abonnieren Sie unseren Newsletter.