> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/videos-als-hintergrund-in-webseiten-und-funnels-einsetzen.md). # Videos als Hintergrund in Webseiten und Funnels einsetzen Setze kurze Videos als Hintergrund für einen Abschnitt, eine Zeile oder eine Spalte ein, richte Darstellung, Überlagerung und Wiederholung ein und prüfe die Wirkung auf allen Geräten. Ein Video-Hintergrund bewegt sich hinter dem eigentlichen Seiteninhalt. Er kann einen ruhigen ersten Eindruck schaffen, etwa für ein Hotel, ein Studio oder eine Referenzseite. Besucher bedienen ihn nicht wie ein normales Video: Die Überschrift, der Text und der Button davor bleiben der wichtige Teil der Seite. Verwende diese Funktion sparsam. Ein Hintergrundvideo soll die Botschaft unterstützen, nicht den Text überdecken oder von der nächsten Aktion ablenken. ## Was sich mit einem Video-Hintergrund gestalten lässt Du kannst ein Hintergrundvideo für drei Arten von Bereichen festlegen: * **Abschnitt:** ein größerer, zusammenhängender Bereich einer Seite, zum Beispiel die erste Fläche nach dem Seitenaufruf. * **Zeile:** ein Bereich innerhalb eines Abschnitts, der mehrere Inhalte nebeneinander oder untereinander aufnehmen kann. * **Spalte:** ein einzelner Teil einer Zeile. Die Originalansichten zeigen die Einstellung direkt am ausgewählten Bereich im rechten Einstellungsbereich. Das ist wichtig: Du stellst das Video nicht an einem Text oder Button ein, sondern an dem umgebenden Bereich, der als Hintergrund dienen soll. Die Quelle nennt **MP4** und **WebM** als unterstützte übliche Webvideoformate. Verwende nur ein Video, das du in deiner Medienbibliothek verwenden darfst. ## Vor dem Einrichten: gute Entscheidung treffen Prüfe diese Punkte, bevor du eine Datei auswählst: 1. **Hat das Video einen klaren Zweck?** Eine kurze, ruhige Bewegung kann Atmosphäre vermitteln. Für eine Erklärung, einen Vortrag oder ein Produktvideo ist ein normales Video-Element meist verständlicher. 2. **Bleibt der Text lesbar?** Überschrift, Fließtext und Button müssen auf jedem einzelnen Bild des Videos deutlich erkennbar sein. 3. **Ist das Motiv an den Rändern unwichtig?** Je nach Darstellungsart kann die sichtbare Fläche anders ausfallen als die ursprüngliche Videofläche. 4. **Ist die Datei für eine Website vorbereitet?** Sehr lange oder unnötig große Dateien können die Seite schwerfällig machen. Verwende ein kurzes, webtaugliches Video. 5. **Funktioniert die Seite ohne die Bewegung noch?** Die Überschrift und der Button müssen auch dann verständlich sein, wenn Besucher dem Hintergrundvideo keine Aufmerksamkeit schenken. ## Video-Hintergrund einrichten 1. Öffne die gewünschte Website- oder Funnel-Seite im Editor. 2. Klicke den **Abschnitt**, die **Zeile** oder die **Spalte** an, die den Hintergrund erhalten soll. 3. Öffne rechts die Einstellungen des ausgewählten Bereichs. 4. Suche den Bereich für die Hintergrundmedien. 5. Stelle den Medientyp von **Bild** auf **Video** um. 6. Wähle die Videodatei aus deiner Medienbibliothek aus. 7. Lege die Darstellung, die Hintergrund-Überlagerung und bei Bedarf die Wiederholung fest. 8. Speichere die Änderung. 9. Öffne über das Vorschau-Symbol die Seite im Browser und prüfe sie anschließend auch in der mobilen Ansicht. 10. Veröffentliche erst, wenn Text, Button, Bewegung und Bildausschnitt stimmig sind. In der Originalansicht sind zusätzlich Felder für die Hintergrunddatei und ein Video-Vorschaubild sichtbar. Die Quelle erklärt die genaue Wirkung des Vorschaubild-Feldes nicht. Plane deshalb keine wichtige Seitenaussage ausschließlich über dieses Feld und prüfe die veröffentlichte Seite selbst. ## Die Einstellungen verständlich erklärt | Einstellung | Wofür sie da ist | Worauf du achten solltest | | ---------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | **Hintergrund-Medientyp** | Schaltet den Hintergrund des ausgewählten Bereichs von Bild auf Video um. | Prüfe nach dem Umschalten, dass wirklich der Abschnitt, die Zeile oder die Spalte ausgewählt ist, die du gestalten möchtest. | | **Hintergrunddatei** | Legt fest, welches Video im Hintergrund angezeigt wird. | Wähle eine freigegebene, kurze Datei aus der Medienbibliothek. | | **Video-Optionen** | Bestimmen, wie das Video in den verfügbaren Bereich eingepasst wird. | Vergleiche alle Varianten in der Vorschau, denn derselbe Film kann je nach Bereich sehr unterschiedlich wirken. | | **Hintergrund-Überlagerung** | Steuert, wie stark sich der Hintergrund visuell zurücknimmt. | Sie hilft, Text und Buttons vom bewegten Bild abzuheben. Teste sie mit dem echten Seitentext, nicht nur mit leerem Platzhaltertext. | | **Video-Schleife** | Lässt das Video nach dem Ende erneut starten oder nur einmal laufen. | Eine Schleife passt zu einer kurzen, ruhigen Bewegung. Bei einer erzählerischen Sequenz kann einmaliges Abspielen besser passen. | ## Darstellung auswählen: Einpassen, Ausfüllen oder Abdecken Die Einstellung **Video-Optionen** bietet drei Varianten. Keine davon ist pauschal richtig; sie entscheidet, ob freie Ränder, eine vollständige Füllung oder die Proportionen wichtiger sind. | Variante | Wirkung laut Quelle | Sinnvoll, wenn … | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Einpassen** | Das gesamte Video wird mit seinem Seitenverhältnis in den Bereich gesetzt. Wenn die Form nicht passt, können freie Flächen entstehen. | jede Bildkante wichtig ist, zum Beispiel bei einer Gesamtansicht eines Raums. | | **Ausfüllen** | Der Hintergrundbereich wird vollständig gefüllt. Dafür können Bildteile verloren gehen oder das Bild kann nicht mehr seine ursprünglichen Proportionen behalten. | ein lückenlos gefüllter Bereich wichtiger ist als alle Randdetails. | | **Abdecken** | Der verfügbare Bereich wird mit erhaltenen Proportionen möglichst umfassend genutzt. | du eine ausgeglichene, ungestreckte Darstellung anstrebst. Prüfe trotzdem den sichtbaren Ausschnitt auf allen Geräten. | Der praktische Ablauf ist immer gleich: Wähle eine Variante, öffne die Vorschau und kontrolliere das wichtigste Motiv. Wechsle danach in die mobile Ansicht. Wenn zum Beispiel ein Gesicht, ein Logo oder ein Button-Hintergrund abgeschnitten wirkt, ändere entweder die Darstellungsart, die Höhe des Bereichs oder das Quellvideo. ## Text über dem Video lesbar machen Die Quelle bietet für die Hintergrund-Überlagerung vier Stufen: **Keine**, **Leichte Überlagerung**, **Halbe Überlagerung** und **Starke Überlagerung**. Sie steuern, wie stark sich das bewegte Hintergrundbild optisch zurücknimmt. Eine einfache Entscheidungshilfe: * **Keine Überlagerung:** Nur verwenden, wenn der Text auch auf allen Videobildern sicher lesbar bleibt. * **Leichte Überlagerung:** Für ruhige, kontrastarme Motive mit wenig Text. * **Halbe Überlagerung:** Ein guter Ausgangspunkt, wenn eine Überschrift, ein kurzer Text und ein Button über dem Video stehen. * **Starke Überlagerung:** Hilfreich bei hellen, kontrastreichen oder stark bewegten Videos, damit der Inhalt davor Priorität bekommt. Die Stufen sind kein Ersatz für eine Prüfung. Spiele das Video in der Vorschau durch. Ein Text kann am Anfang gut lesbar sein und wenige Sekunden später vor einem hellen Bild verschwinden. ## Video-Schleife bewusst einsetzen Mit aktivierter **Video-Schleife** startet das Hintergrundvideo automatisch wieder von vorn, sobald es endet. Ist die Schleife deaktiviert, läuft es einmal und bleibt dann am Ende stehen. Eine Schleife eignet sich gut für eine kurze, unaufdringliche Bewegung – etwa langsam wehende Vorhänge, ein ruhiger Kameraschwenk oder dezente Arbeitsatmosphäre. Wähle sie nicht automatisch für ein Video mit Anfang und Ende. Dort kann ein stilles Schlussbild besser zum Seiteninhalt passen. Teste mindestens zwei Durchläufe. Achte darauf, ob der Übergang vom Ende zurück zum Anfang auffällt oder die Aufmerksamkeit vom Button und der eigentlichen Botschaft abzieht. ## Vollständiger Test vor der Veröffentlichung Prüfe den Hintergrund nicht nur im Editor: 1. Speichere die Seite und öffne die Browser-Vorschau. 2. Lies Überschrift, Text und Button, während das Video läuft. 3. Warte bis zum Ende des Videos und prüfe bei aktivierter Schleife den Übergang zum Anfang. 4. Kontrolliere, ob das wichtigste Videomotiv im gewählten Bereich sichtbar bleibt. 5. Wechsle die Darstellungsarten testweise, wenn Ränder, Leerflächen oder ein ungünstiger Ausschnitt auffallen. 6. Prüfe alle Überlagerungsstufen mit deinem echten Inhalt und wähle die lesbarste Variante. 7. Öffne die Seite auf einem Smartphone und kontrolliere dort erneut Ausschnitt, Text, Button und Bewegung. 8. Erst danach veröffentliche die Seite. ## Typische Probleme und ihre Lösung | Beobachtung | Wahrscheinliche Ursache | Nächster Schritt | | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Der Text geht im Video unter. | Die Überlagerung ist zu schwach oder das Video hat sehr helle beziehungsweise kontrastreiche Momente. | Wähle eine stärkere Überlagerung und teste die gesamte Wiedergabe erneut. | | Ein wichtiges Motiv ist auf dem Smartphone nicht sichtbar. | Der Bereich hat auf dem kleineren Bildschirm ein anderes Verhältnis. | Probiere eine andere Darstellungsart, passe die Bereichshöhe an oder verwende ein Video mit mehr Freiraum um das Motiv. | | Es entstehen freie Ränder. | **Einpassen** hält das Seitenverhältnis des Videos bei, aber die Form des Bereichs passt nicht dazu. | Probiere **Abdecken** oder gestalte den Bereich so, dass die freie Fläche bewusst zum Layout passt. | | Das Bild wirkt verzerrt oder wichtige Teile fehlen. | **Ausfüllen** priorisiert die vollständige Flächenfüllung. | Vergleiche **Einpassen** und **Abdecken** in der Vorschau und wähle die bessere Wirkung. | | Die Wiederholung wirkt störend. | Anfang und Ende des Videos passen nicht zusammen oder die Bewegung ist zu auffällig. | Deaktiviere die Schleife oder verwende eine kürzere, ruhigere Sequenz. | | Die Seite fühlt sich schwerfällig an. | Die Datei ist für den Einsatz als Hintergrund zu groß oder zu lang. | Bereite ein kürzeres, webtaugliches Video vor und prüfe die veröffentlichte Seite erneut. | ## Grenzen, die du kennen solltest * Ein Hintergrundvideo unterstützt den Inhalt, ersetzt aber keine verständliche Überschrift und keinen klaren Button. * Der Editor kann die Gestaltung vorbereiten. Entscheidend ist immer die Vorschau beziehungsweise die veröffentlichte Ansicht auf Desktop und Smartphone. * Die Quelle beschreibt zwar die sichtbaren Einstellungsmöglichkeiten, aber nicht die genaue Wirkung des Feldes für das Video-Vorschaubild. Verlasse dich darauf nicht ohne eigenen Test. * Gute Lesbarkeit und ein sinnvoller Bildausschnitt müssen für jede einzelne Seite geprüft werden. * Originalvideos und Originalansichten aus der Quelle werden nicht in deine Seite übernommen. Verwende nur eigene oder freigegebene Medien aus deiner Medienbibliothek. ## Praxisbeispiel: Ruhiger Einstieg für eine Beratungsseite Eine Innenarchitektin möchte auf ihrer Startseite einen lebendigen, aber ruhigen Einstieg gestalten. 1. Sie wählt eine kurze Videosequenz eines hellen Wohnraums mit langsamer Kamerabewegung. 2. Im ersten Abschnitt der Website stellt sie den Hintergrund-Medientyp auf **Video** und wählt die Datei aus der Medienbibliothek. 3. Sie entscheidet sich für **Abdecken**, weil der Bereich ohne Verzerrung vollständig genutzt werden soll. 4. Über dem Video platziert sie eine klare Überschrift, einen kurzen Satz und einen Button zur Terminseite. 5. Weil helle Flächen im Video vorkommen, testet sie mehrere Überlagerungsstufen und wählt die halbe Überlagerung. 6. Sie aktiviert die Schleife nur, nachdem der Übergang zwischen Ende und Anfang bei zwei Durchläufen ruhig wirkt. 7. In der mobilen Vorschau stellt sie fest, dass das zentrale Möbelstück zu weit am Rand liegt. Sie tauscht das Quellvideo gegen eine Variante mit mehr Freiraum aus. 8. Erst nach diesem Test veröffentlicht sie die Seite. Das Ergebnis: Besucher sehen einen atmosphärischen Einstieg, können die Botschaft trotzdem sofort lesen und finden die nächste Aktion ohne Ablenkung. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/videos-als-hintergrund-in-webseiten-und-funnels-einsetzen.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.