CMS-gestützte Hintergrundvideos in Webflow erstellen

Warum fragst du, ob du das tun willst? Nun, vielleicht möchten Sie zum Beispiel, dass ein anderes Hintergrundvideo im Heldenbereich auf der Vorlagenseite einer CMS-Sammlungsliste abgespielt wird. Möglicherweise haben Sie eine Sammlungsliste auf einer Seite und möchten, dass in jedem Objekt ein anderes Video abgespielt wird. Für uns als Webflow-Studio war es ein aktuelles Projekt für einen Kunden, bei dem der Heldenbereich auf der Homepage je nach Wochentag geändert werden musste und jeden Tag ein anderes Video als Hintergrundelement abgespielt werden sollte (mehr darüber, wie wir das Video so eingerichtet haben, dass es je nach Wochentag abgespielt wird, in einem kommenden Beitrag), und dann dasselbe Video, das auf der Sammlungslistenseite des Anlasses abgespielt wird. Wir benötigten die CMS-Elemente, um festzustellen, welches Video gerade abgespielt wurde, aber mit dem Standard-Hintergrundvideoelement in Webflow konnten wir das nicht tun, also haben wir Folgendes gemacht:

Wir zeigen dir, wie du den Hintergrund zu einem CMS-Objekt hinzufügst, indem du ihn in einem Hintergrundvideoelement auf Webflow hochlädst. Wir verwenden ein HTML-Embed-Element, um das Video in das CMS-Sammlungslistenelement auf der Vorlagenseite oder dem Sammlungslistenelement auf einer Seite zu platzieren, und dann blenden wir einfach das ursprüngliche Hintergrundelement aus, damit es nach der Veröffentlichung nicht verschwindet. Milk Moon Studio ist ein kleines Webflow-Studio, daher mögen wir einfache und codearme Dinge, und genau das werden wir Ihnen zeigen.

Es gibt allerdings zwei Denkrichtungen, wie das geht, und wir werden die erste verwenden, aber du kannst die zweite ausprobieren, also listen wir sie auf.

1. Sie laden die Videos, die Sie verwenden möchten, in einem Hintergrundvideoelement in Webflow hoch, das dann ausgeblendet wird, sodass das Video in Ihrem Projekt verbleibt. Dieser Ansatz ermöglicht es Ihnen, gewissermaßen immer noch die native Funktionalität mit einem kleinen Hack zu nutzen. Webflow transkodiert das Video trotzdem und gibt es in Webm und MP4 aus. Sie verwenden beide und lassen den Browser des Benutzers entscheiden, welches auf der Seite gerendert werden soll, je nachdem, was er unterstützt. Sie werden auch das AWS-CDN von Webflow verwenden, um die Inhalte in den Rechenzentren von Amazon zu hosten.
2. Der zweite Ansatz funktioniert genauso, wenn es um das Einrichten und Einbetten und ein Feld zum Verweisen auf das Video in Ihrer Sammlungsliste geht, aber Sie hosten das Video nicht in Webflow. Stattdessen kaufst du ein Videokonto. Auf diese Weise können Sie die Einbettungseinstellungen usw. anpassen und dann im CMS-Element auf das Video verweisen. Anstatt ein Webflow-transkodiertes WebM- oder MP4-Video zu verwenden, werden Sie dann im Hintergrund ein Vimeo-Video in einer Endlosschleife abspielen. Der Code unterscheidet sich ein wenig, mehr dazu am Ende des Beitrags. Wir haben kürzlich einen Beitrag hinzugefügt über Steuerung und Optimierung der Vimeo-Hintergrundvideoeinbettungen mit Object Intersect Observer Code, also sieh dir das auch an.
3. Option 3, ja, wir sagten zwei, aber es gibt drei. Kombinieren Sie die Optionen eins und zwei. Kaufe ein Vimeo Pro-Konto, damit du die URLs der Videos auf Vimeo abrufen kannst. Verwende dann den Einbettungscode, den wir für Option eins mit den Vimeo-Videolinks bereitstellen, und verwende die Vimeo-IDs nicht wie bei Option 2. Wir werden das nicht behandeln, du wirst es herausfinden.

Beginnen wir also mit der Webflow-Methode:

Schritt 1 — Richten Sie Ihre CMS-Sammlung ein

Sie benötigen zwei Felder, eines für die URL des MP4-Videos und eines für das WebM-Video.

• Erstellen Sie 2 Felder, Klartext, eines mit dem Namen MP4 und eines mit dem Namen Webm.

Damit ist die Einrichtung der CMS-Sammlungsliste abgeschlossen. Natürlich können Sie der Sammlungsliste weitere Felder hinzufügen, die Sie benötigen

Schritt 2 — Richten Sie Ihr Hintergrundvideoelement auf der CMS-Vorlagenseite oder dem Sammlungslistenelement ein

• Gehe zu dem Element, in dem das Video erscheinen soll. Dies kann sich in einem Sammlungslistenelement auf einer statischen Seite oder auf einer CMS-Vorlagenseite befinden. Du wirst einen Wrapper für das Video brauchen, also gib div ein, wir nennen es Videocover.
• Stellen Sie das Div auf Relativ und Größe so ein, wie Sie das Hintergrundvideoelement vergrößert hätten, wenn Sie es verwenden könnten. Wenn du Text oder was auch immer über dem Video haben willst, willst du auch, dass das Element, in dem sich dieses Div befindet, relativ ist, sodass du es mithilfe des Z-Index stapeln kannst. Wir haben den Video-Wrapper auf 1 und den Inhalt darüber auf 2 gesetzt, damit wir sie schön stapeln können und das Video ist unten.

Wir haben alles im Screenshot gut benannt, damit Sie sehen können, wie wir sie gestapelt haben. Video Cover ist der Div-Wrapper, der das Embed-Element enthalten wird. Darüber haben wir ein Farb-Overlay mit einer schwarzen Deckkraft von 20%, um die Komprimierung etwas weniger offensichtlich zu machen (mehr dazu in den Tipps am Ende) und die Kopie darüber liegt. Die Farbüberlagerung macht den Text auch besser lesbar, da einige unserer Videos weiße Elemente enthalten. Unser Video-Cover ist ebenfalls auf Absolute Positionierung mit einer Breite und Höhe von 100% eingestellt. Wir möchten, dass es den gesamten Hintergrund des Hero-Bereichs auf dieser Seite ausfüllt.

• Fügen Sie nun eine HTML-Einbettung in Ihren Video-Wrapper ein. Dies wird den Code enthalten, mit dem das alles gut funktioniert:

• Fügen Sie den folgenden Code hinzu und wählen Sie die MP4- und WebM-Felder aus, die Sie zuvor erstellt haben.

<iframe height="300" style="width: 100%;" scrolling="no" title="CMS powered background videos in Webflow - WebM and Mp4" src="https://codepen.io/milkmoonstudio/embed/ExpGNzB?default-tab=html%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/ExpGNzB">
</a><a href="https://codepen.io/milkmoonstudio">CMS-gestützte Hintergrundvideos in Webflow - WebM und Mp4 von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Also, was passiert hier? Beim Einbetten wird ein Inline-Hintergrundvideo abgespielt, das als Endlosschleife eingestellt ist. Wenn der Browser HTML5-Video und WebM unterstützt, wählt er das aus, andernfalls wird standardmäßig das MP4-Video verwendet.

Das war's für das CMS-Setup, aber woher bekommen wir die URLs für die Videos, die wir zu den CMS-Elementen in der Sammlungsliste hinzufügen müssen.

Schritt 3 — Holen Sie sich die Video-URLs.

Der nicht so lustige Teil. Du kannst die Videos nicht einfach hochladen, Webflow muss sie transkodieren und sie dem CDN hinzufügen. Der einfachste Weg, diesen Schritt abzuschließen, besteht darin, eine statische Seite zu erstellen, für jedes benötigte Video ein Hintergrundvideoelement einzufügen, die Videos zu diesen Hintergrundvideoelementen hinzuzufügen und die Seite zu veröffentlichen. Gehe zur veröffentlichten Seite und überprüfe den Code. Jedes Video, das Sie hochgeladen haben, hat eine MP4- und WebM-Video-URL (warten Sie, bis die Videos in Webflow komprimiert sind, bevor Sie dies tun). Kopieren Sie die WebM- und MP4-URL für jedes Hintergrundvideoelement und fügen Sie die URL in die beiden Videofelder des entsprechenden CMS-Elements ein, die Sie in Schritt 1 erstellt haben.

Sehr wichtig, löschen Sie nicht das gerade erstellte Hintergrundvideoelement. Sie müssen so lange in Webflow bleiben, wie Sie die Videos im CMS benötigen. Schalten Sie einfach die statische Seite, die Sie erstellt haben, auf Entwurf um, um sie aus dem Live-Projekt zu entfernen, und schon geht es Ihnen gut. Die Seite wird auf der veröffentlichten Website nicht sichtbar sein, aber die Video-Assets bleiben erhalten.

Das war's, du bist fertig, mach weiter und schau dir die veröffentlichten Videos an.

Tipps für bessere Hintergrundvideos

• KOMPRIMIERE den lebenden Mist aus dem Video. Webflow wird das Video transkodieren und eine WebM-Version ausspucken, aber du willst vorher komprimieren. Benutzerfreundlichkeit ist der Schlüssel und Sie möchten nicht, dass der Browser des Benutzers heruntergezogen wird. Fangen Sie also klein an. Wir empfehlen Handbremse, es ist kostenlos und Sie können einen Tag damit verbringen, die Einstellungen zu optimieren, bis Sie das bekommen, was Sie wollen. Wir haben viele Leute gesehen, die gesagt haben, Sie sollten ungefähr 720p mit einer niedrigen Bildrate von etwa 25 Bildern pro Sekunde und Bitraten zwischen 750k und 1250k anstreben, bevor Sie die niedrigste wählen, die Sie für akzeptabel halten. Sie können es etwas weiter herunterdrücken und die nächsten beiden Anpassungen ausprobieren, sobald Sie die Videos zu Webflow hinzugefügt haben
• Farbe übermäßig. Sie benötigen ein großes Video, aber nachdem Sie es auf die gewünschte Größe gebracht haben, sieht es nicht zu heiß aus. Ziehen Sie ein schwarzes Overlay über das Video, passen Sie die Transparenz an, sodass Sie das Video immer noch sehen, aber das Overlay mildert die angewendete Komprimierung.
• Unschärfe. Ziehen Sie wie oben ein Div über das Videoelement und wenden Sie eine Unschärfe an, um die durch die Komprimierung entstehenden Artefakte zu mildern.
• Musterüberlagerungen können ebenfalls helfen. Stellen Sie die Transparenz des Musters so niedrig wie möglich ein und verbergen Sie dennoch Artefakte.
• Wenn Sie Schwierigkeiten haben, die Dinge klein zu halten, wählen Sie ein Video aus, das sehr kurz ist, aber perfekt abgespielt werden kann. Je kürzer das Video, desto kleiner die Größe und wenn du etwas findest, bei dem Anfang und Ende der Schleife weniger offensichtlich sind.
• Vermeiden Sie Bewegung, was nicht intuitiv klingt und Sie versuchen, ein Video hinzuzufügen, das von Natur aus Bewegung enthält... wir meinen nur schnelle Bewegungen, verwackeltes Video, solche Dinge.
• Für diejenigen, die etwas unerschrockener sind, können Sie das Video auch nach einer bestimmten Anzahl von Loops mit etwas Javascript anhalten, das entlastet den Browser.
• Wenn du dir Sorgen um das Handy machst, stelle das Video so ein, dass es auf dem Handy angezeigt wird: keines und verwende stattdessen ein statisches Bild oder ein sehr, sehr kleines GIF (wir sagen JIF).
• Wenn Sie sich nicht sicher sind, Handbrake oder eine ähnliche App zur Komprimierung zu verwenden, empfiehlt Webflow Schimpanse Champ, beachten Sie nur, dass der kostenlose Plan nur SD exportiert.

Vimeo-Methode

Für Vimeo benötigst du ein kostenpflichtiges Konto, um die IDs für das Einbetten zu erhalten, und es ist schwieriger, es so zu bekommen, dass es einen Bereich abdeckt, da das Element versucht, das ursprüngliche Seitenverhältnis beizubehalten. Machen Sie sich aber keinen Stress, der Hack, den sie hier haben funktioniert sehr gut, also schau dir das an. Wir haben es auch benutzt, mit einer Änderung hier und da.

In Bezug auf den HTML-Einbettungscode gibt es einige verschiedene Vimeo-Implementierungen. Es wird ungefähr so aussehen:

<iframe height="300" style="width: 100%;" scrolling="no" title="CMS powered background videos in Webflow - Vimeo Embeds" src="https://codepen.io/milkmoonstudio/embed/LYBMxVG?default-tab=html%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/LYBMxVG">
</a><a href="https://codepen.io/milkmoonstudio">CMS-gestützte Hintergrundvideos in Webflow - Vimeo Embeds von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Denken Sie daran, zu überprüfen, ob der Bereich an allen Geräte-Breakpoints ordnungsgemäß abgedeckt ist.

Wir haben festgestellt, dass die Vimeo-Methode zwar manchmal langsamere Pagespeed-Ergebnisse meldet, aber die Zeit bis zur Interaktion, bei der der Nutzer die Seite tatsächlich nutzen kann, mit Vimeo etwas schneller ist, aber das Laden des Videos dauert aufgrund der iFrames etwas länger. Wir überlassen es den Webflow-Experten, zu entscheiden, welche Option ihnen am besten gefällt.

Wir werden sagen, dass manchmal ein Videoelement mit Vimeo besser funktioniert. So etwas wie das:

<iframe height="300" style="width: 100%;" scrolling="no" title="Vimeo Background Video <video> element embed" src="https://codepen.io/milkmoonstudio/embed/LYMoGxm?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/LYMoGxm">
</a><video><a href="https://codepen.io/milkmoonstudio">Vimeo-Hintergrundvideoelement eingebettet von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Du hast mehr Kontrolle, da die adaptive Bitrate usw. von Vimeo nicht aktiviert wird. Du musst nur wissen, dass es ein bisschen mehr Arbeit ist. In diesem Beispiel fügst du drei URLs von Vimeo für die Datei hinzu, anstatt nur die Vimeo-ID. Stellen Sie außerdem sicher, dass Sie beim Kopieren der URLs von der Vimeo-Seite Ihres Videos die Vimeo-Download-URLs und nicht die Vimeo-Player-URLs verwenden. Die Player-URLs laufen nach 2 Tagen ab. Klicken Sie einfach auf den Videonamen, rufen Sie die Links in der Dropdownliste auf und merken Sie sich die Download-URLs. Welche Sie wählen, liegt bei Ihnen und hängt von der Qualität der hochgeladenen Datei ab. Normalerweise entscheiden Sie sich für eine hohe, mittlere und niedrige Qualität, aber Sie können weitere hinzufügen usw., ganz nach Ihren Wünschen.

Wir haben auch einen neueren Beitrag erstellt, der sich speziell mit Vimeo-Hintergrundvideo und Verwendung von Object-Intersect-Code zur Optimierung und Steuerung von Videos und anderen Elementen auf der Website auf der Grundlage von Videozuständen, also schau dir das auch an, aber für die Video-Tags kannst du das Play and Pause-Skript von Finstweet verwenden, um die Leistung zu optimieren, indem du die Videos einfach abspielst, wenn sie sich im Viewport befinden, oder pausierst, wenn sie den Viewport verlassen.

Wenn du Fragen hast, hinterlasse gerne einen Kommentar und wenn du nach mehr suchst Anleitungen schau dir diesen Link an.