# Video Loops: So machen Marken Clips, die nie zu enden scheinen [Canonical HTML page](https://gradiently.design/de/guide/looping-video-background) Ein guter Loop läuft den ganzen Tag im Schaufenster, liegt hinter einer Website-Headline oder dreht sich unter einem Song, und niemand merkt, wo er anfängt. So setzen Marken ihn ein. ## The short version - Ein Video Loop ist ein kurzer Clip, der sich ständig wiederholt und so gebaut ist, dass der Übergang vom Ende zum Anfang unsichtbar bleibt. - Marken nutzen Video Loops in Website-Heroes, auf Bildschirmen im Laden, in Social Posts, als Musik-Canvas, auf Eventbühnen und als Pausenbild bei Streams. - Je langsamer sich ein Loop bewegt, desto länger sollte er sein, weil Wiederholung bei langsamer Bewegung leichter auffällt. - Loops wirken endlos, wenn darin nichts nur einmal passiert: kein einzelner Blitz, Schnitt oder Gegenstand, der den Neustart markiert. - Auf Websites sollte ein Video Loop stumm sein, inline laufen, ein Posterbild haben und die Einstellung für reduzierte Bewegung respektieren. Ein **Video Loop** ist ein kurzer Clip, der sich endlos wiederholt, ohne dass jemand sieht, wo er neu startet. Für Marken ist er eines der nützlichsten Formate überhaupt: Eine Datei kann hinter einer Website-Headline laufen, auf einem Bildschirm an der Kasse, unter einem Song auf Spotify oder hinter der Pausentafel eines Livestreams. Das Handwerk lässt sich einfach beschreiben. Lass das letzte Bild direkt ins erste übergehen, halte die Bewegung langsam und durchgehend und bau nie ein einmaliges Ereignis in den Clip ein, denn alles, was einmal passiert, wird zur Markierung des Neustarts. ## Wo Marken Video Loops einsetzen Loops passen überall dorthin, wo Menschen zu einem zufälligen Moment ankommen und unbestimmt lange bleiben. Niemand fängt bei Sekunde null an, ein Schaufenster anzuschauen, also ist eine Geschichte mit Anfang und Ende die falsche Form. Ein Loop hat keinen Anfang, und genau das ist der Sinn. | Ort | Größe | Typische Länge | Ton | | --- | --- | --- | --- | | Website-Hero | 1920×1080 | 10 bis 30 Sekunden | Nie | | Bildschirm im Laden oder Schaufenster | 1920×1080 oder 1080×1920 | 20 bis 30 Sekunden | Selten | | Instagram Reel oder Story | 1080×1920 | 5 bis 15 Sekunden | Optional | | Feed-Post | 1080×1350 | 5 bis 10 Sekunden | Optional | | Spotify Canvas | 1080×1920 | 3 bis 8 Sekunden | Kommt vom Track | | Twitch Offline-Bildschirm | 1920×1080 | 20 bis 30 Sekunden | Optional | Ausgangspunkte, keine Regeln. Plattformlimits ändern sich, also prüf vor dem Veröffentlichen die Vorgaben der jeweiligen Plattform. Querformatiges Bildschirmdesign für ein Café-Schaufenster mit langsam bewegtem warmem Verlauf und stehender Headline Ein Loop im Querformat für das Fenster eines Cafés. Die Farbe bewegt sich, die Worte bleiben stehen, damit man sie von der anderen Straßenseite lesen kann. Pausenbildschirm eines Streams mit dem Text gleich geht es weiter über einem ruhigen Verlauf im Loop Ein Pausenbild für einen Stream. Es läuft vielleicht zehn Minuten, also muss die Bewegung ruhig sein. Jeder dieser Orte hat eigene Regeln für Größe und Ton. [Videohintergründe auf Websites](https://gradiently.design/de/guide/video-background-website) behandelt den Webfall im Detail, und [Ambient Videohintergründe](https://gradiently.design/de/guide/ambient-video) geht auf die langen, ruhigen Loops ein, die auf Bildschirmen und in Streams laufen. ## Was einen Loop endlos wirken lässt Technisch muss ein Loop nur mit seinem Ende auf seinen Anfang treffen. Für die Wahrnehmung braucht es mehr. Menschen bemerken Wiederholung an Orientierungspunkten: der Moment, in dem ein heller Fleck an einer Ecke vorbeizieht, das Bild, in dem eine Form auftaucht, ein Flackern im Korn, das immer an derselben Stelle landet. Entferne diese Punkte, und ein Clip von zwölf Sekunden kann sich anfühlen, als liefe er stundenlang. - **Durchgehende Bewegung.** Driften, Drehungen und langsame Schwenks, die nie anhalten. Anhalten und Anfahren erzeugt einen Takt, den das Auge mitzählen kann. - **Ganze Zyklen.** Alles, was sich bewegt, vollendet in der Länge des Clips eine ganze Zahl von Umdrehungen oder Durchgängen und endet genau dort, wo es begonnen hat. - **Mehrere Ebenen mit verwandten Tempi.** Ein Hintergrund, der einmal durchläuft, und ein Glanzlicht, das zweimal durchläuft, tarnen gegenseitig ihre Wiederholung. - **Keine Einzelereignisse.** Kein Blitz, kein Schnitt, kein Logo-Sting und kein Objekt, das einmal auftaucht. Was einmal passiert, markiert den Neustart. - **Stehende Worte.** Text, der hereinanimiert wird, wird in jedem Durchlauf wieder hereinanimiert. In einem Video Loop sind die Worte einfach da. Die Details eines sauberen Übergangs auf Bildebene, einschließlich des doppelten letzten Bildes, das die meisten Ruckler verursacht, findest du unter [nahtloses Loop Video](https://gradiently.design/de/guide/seamless-loop-video). ## Wie lang sollte ein Video Loop sein Die Länge hängt vom Tempo ab und davon, wie lange Menschen hinsehen. Ein Loop, den jemand drei Sekunden lang streift, darf kurz sein. Ein Loop, der einen ganzen Nachmittag an einer Wand läuft, muss lang und langsam genug sein, dass die Wiederholung nie offensichtlich wird. Längere Clips bedeuten größere Dateien, also wäge beides ab. | Bewegung | Betrachtungszeit | Loop-Länge | | --- | --- | --- | | Lebhaft, deutlich bewegt | Ein Blick | 5 bis 10 Sekunden | | Gleichmäßiges Driften | Ein paar Sekunden bis eine Minute | 10 bis 20 Sekunden | | Sehr langsam, ambient | Minuten oder Stunden | 20 bis 30 Sekunden | Je langsamer die Bewegung und je länger Menschen hinsehen, desto mehr Sekunden braucht ein Loop, bis seine Wiederholung nicht mehr auffällt. [Wie lang sollte ein Video Loop sein](https://gradiently.design/de/guide/video-loop-length) geht diese Abwägung Platzierung für Platzierung durch und behält dabei die Dateigrößen im Blick. ## So machst du aus einem Design einen Video Loop 1. **Vom Abspielort ausgehen** Wähl zuerst die genaue Größe: 1920×1080 für einen Bildschirm im Querformat oder einen Hero, 1080×1920 für Stories, Reels und Bildschirme im Hochformat, 1080×1350 für einen Feed-Post. 2. **Eine bewegte Ebene wählen** Meist der Hintergrund. Ein bewegter Verlauf oder ein Material ist ideal, weil er keine Kanten hat, die den Loop verraten. 3. **Worte ruhig und stehend halten** Setz Text dorthin, wo der Hintergrund am ruhigsten ist. Wenn sich etwas bewegen soll, lass die Bewegung im Hintergrund. 4. **Die Länge auf ganze Zyklen legen** Sorg dafür, dass jede Bewegung im Clip eine ganze Zahl von Zyklen vollendet, damit das letzte Bild ins erste fließt. 5. **Als Video exportieren und im Loop ansehen** Exportiere MP4 oder für das Web WebM und spiel es in voller Größe mindestens eine Minute lang in Schleife ab. Behebe alles, was dir zweimal auffällt. Warmer Grund für einen Café-Loop: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)` Ein Loop funktioniert am besten auf einem Hintergrund wie diesem: weiche Farbe ohne Kanten, die driften kann, ohne je eine Naht zu zeigen. Hier passt Gradiently hinein. Jeder Mark ist ein lebendiger Hintergrund aus Verlauf und Material, der sich schon bewegt. Mit Pro exportiert ein darauf gebautes Design also als nahtloser Loop von 5 bis 30 Sekunden, ohne dass du irgendetwas animierst. Und weil kein Mark wie ein anderer aussieht, ist der Loop in deinem Fenster nicht derselbe Stock-Hintergrund wie im Laden nebenan. ## Einen Video Loop auf eine Website bringen Browser spielen Videos nur automatisch ab, wenn sie stumm sind, und Handys brauchen `playsinline`, damit das Video in der Seite bleibt. Füg ein Posterbild hinzu, damit etwas erscheint, bevor das Video lädt, und biete zuerst das kleinere WebM an, mit MP4 als Fallback. ```html ``` Ein stummer Video Loop, inline und mit Posterbild. Wer sein Gerät um weniger Bewegung bittet, bekommt stattdessen das stehende erste Bild. Diese letzte Regel ist wichtig. Manche Menschen empfinden ständige Bewegung als ablenkend oder körperlich unangenehm, und ihr Betriebssystem teilt das dem Browser mit. [Prefers reduced motion](https://gradiently.design/de/guide/reduced-motion) erklärt, wie du das richtig berücksichtigst. ### Vermeiden - Ein Logo, das zu Beginn jedes Durchlaufs hereinanimiert - Ein sichtbarer Sprung beim Neustart des Clips - Schnelle Bewegung hinter kleinem Text - Ein Loop mit Ton auf einer Website - Ein GIF, wo ein Video genügen würde ### Machen - Ein stehendes Logo über einem bewegten Hintergrund - Ganze Zyklen, damit das Ende auf den Anfang trifft - Langsame Bewegung mit einer ruhigen Zone für Worte - Stumm, inline, mit Posterbild - MP4 oder WebM, GIF nur für E-Mails ## FAQ ### Was ist ein Video Loop? Ein kurzes Video, das sich ständig wiederholt und dessen Ende direkt in den Anfang übergeht, sodass der Neustart unsichtbar bleibt. Marken nutzen es auf Websites, Bildschirmen, in Social Posts und Streams. ### Wie lang sollte ein Video Loop sein? Lebhafte Loops dürfen 5 bis 10 Sekunden lang sein; ruhige Hintergrund-Loops liegen meist bei 10 bis 20 Sekunden; langsame Loops für Bildschirme, die den ganzen Tag laufen, profitieren von 20 bis 30 Sekunden, damit die Wiederholung schwerer auffällt. ### Welches Format eignet sich am besten für einen Video Loop? MP4 läuft fast überall und ist die sichere Wahl für Social-Media-Plattformen. Auf Websites bietest du zuerst WebM und MP4 als Fallback an. GIF bleibt für E-Mails. ### Warum springt mein Video Loop am Ende? Meist wiederholt das letzte Bild das erste, oder etwas im Clip vollendet keinen ganzen Zyklus. Entferne das doppelte Bild und lass jede Bewegung dort enden, wo sie begonnen hat. ### Darf ein Video Loop Text enthalten? Ja, aber lass den Text stehen. Worte, die hereinanimiert werden, tun das in jedem Durchlauf erneut, und das macht den Neustart offensichtlich.