Hintergrundvideos hinzufügen

Füge interessante visuelle Effekte mit Videos hinzu, die automatisch hinter den Inhalten deiner Website abgespielt werden.

Zuletzt aktualisiert: 11. Januar 2025

Eine Möglichkeit, den Hintergrund deiner Website zu gestalten, besteht darin, Videos für einen dynamischen visuellen Effekt zu verwenden. Du kannst beispielsweise Text und Bilder über Hintergrundvideos hinzufügen, um deinen Seiten mehr Dimension und dynamische Inhalte zu verleihen. Diese Videos werden in einer Endlosschleife ohne Ton abgespielt. Für Hintergrundvideos hast du folgende Möglichkeiten:

  • Verwende YouTube- und Vimeo-Videos je nach Version deiner Website in Seitenabschnitten, Bannern und anderen Bereichen.
  • Lade Videos, die du besitzt, in Abschnittshintergründe in Version 7.1 hoch.

Für ein benutzerdefiniertes Erscheinungsbild kannst du auch stilisierte Filter und Overlay-Farben anwenden.

Weitere Informationen zu all deinen Optionen für die Hintergrundgestaltung findest du unter Den Hintergrund deiner Website gestalten.

Tipp

Du kannst auch animierte Hintergründe mit Bildeffekten und einzigartigen Creative Backgrounds hinzufügen. Mehr dazu erfährst du unter Abschnittshintergrundbilder und Creative Backgrounds für Abschnitte.

Ein Video anschauen

Bevor du loslegst

Allgemeine Hinweise

  • Dein Video-Hosting-Service ist für die Qualität und Auflösung deiner gestreamten Videos verantwortlich. Die Qualität des Streams liegt daher außerhalb der Kontrolle von Squarespace. Falls deine Videos in niedriger Qualität angezeigt werden, folge unseren Designtipps.
  • Auf Squarespace hochgeladene Videos können je nach Gerät, Browser und Internetverbindung mit 1080p oder 360p angezeigt werden. Es gibt keine Möglichkeit, manuell auszuwählen, welche Auflösung angezeigt wird.
  • Während Hintergrundvideos, die unseren Design-Tipps folgen, auf Computern angezeigt werden sollten, werden Videos je nach Verbindungsgeschwindigkeit und Browser-Version des Besuchers möglicherweise nicht immer auf Mobilgeräten angezeigt. Lege ein Ersatzbild für Mobilgeräte fest, das angezeigt wird, wenn das Hintergrundvideo nicht geladen werden kann.
  • Während das Video lädt, wird die Farbe des Hintergrunds oder des Banner-Overlays angezeigt. Falls der Ladevorgang des Videos einige Sekunden dauert, kann es sein, dass das Ersatzbild für Mobilgeräte angezeigt wird. Die Ladezeit hängt von der Internetverbindung ab.
  • Während Hintergrundvideos YouTube- und Vimeo-URLs unterstützen, unterstützen sie das Hinzufügen von Einbettungscode nicht.
  • Geräte im Energiesparmodus zeigen keine Hintergrundvideos an. Wenn du ein Ersatzbild für Mobilgeräte hinzufügst, wird das Ersatzbild angezeigt. Wenn du kein Ersatzbild hinzufügst, werden stattdessen ein Vorschaubild aus dem Video und ein nicht reagierender Wiedergabe-Button angezeigt.

YouTube

  • Deaktiviere Overlay-Anzeigen, oder sie werden über dem Hintergrundvideo angezeigt.
  • Deine Besucher sehen möglicherweise kurz ein YouTube-Logo, den Titel des Videos, ein Uhrensymbol oder ein Freigabesymbol, wenn das Video geladen wird. Das hängt vom Layout und dem Gerät ab.
  • Video-Anzeigen, die vor einem Video abgespielt werden (auch Pre-Roll-Ads genannt), werden bei Hintergrundvideos nicht abgespielt.

Vimeo

  • Du benötigst ein kostenpflichtiges Vimeo-Abonnement, um ein Hintergrundvideo von Vimeo hinzufügen zu können.
  • Es ist nicht möglich, HD-Videos von Vimeo zu Cover-Seiten oder Bannern hinzuzufügen.

Design-Tipps

Hintergrundvideos sind eine großartige Möglichkeit, deine Website visuell ansprechender zu gestalten, sollten jedoch nicht von den eigentlichen Inhalten deiner Website ablenken. Hier sind ein paar Best Practices, mit denen dein Hintergrundvideo stets großartig aussieht. Wenn du ein Hintergrundvideo hochlädst, erfahre mehr über unsere Videoanforderungen.

Wenn du überlegst, welche Videos im Hintergrund verwendet werden sollen, befolge diese Tipps:

Tipp Hinweise
Kleine Videodateien verwenden

Für eingebettete Videos gibt es keine Begrenzung der Videolänge. Für hochgeladene Videos beträgt das Längenlimit 60 Sekunden. Videolänge und Auflösung werden in der Größe der Videodatei berücksichtigt.

Große Videodateien erfordern mehr Ladezeit und können je nach Internetverbindung des Besuchers dazu führen, dass die Wiedergabe eines Videos unterbrochen wird. Denke daran:

  • Eine ideale Bildrate beträgt etwa 60 Bilder pro Sekunde, insbesondere wenn das Video in Zeitlupe angezeigt wird.
  • Wenn dein Video auf Mobilgeräten unscharf aussieht, erhöhe die Bildrate auf mehr als 60 Bilder pro Sekunde, und lade das Video dann erneut hoch.
  • Das Video sollte 40 Sekunden oder kürzer sein.
  • Die Hintergrundfarbe kann häufiger angezeigt werden, wenn kürzere Videos in Endlosschleife abgespielt werden.
  • Verwende eine Auflösung von 1080p und eine Bitrate von mindestens 3 Mbps.
  • Beschränke beim Filmen von Videos die Bewegung der Aufnahme oder Bewegung von Objekten in der Aufnahme. Weniger Bewegung führt oft zu flüssigeren Hintergrundvideos.
Ein breites Seitenverhältnis verwenden
  • Die Größe von Abschnittshintergründen wird automatisch an den Inhalt und die Größe des Browserfensters des Besuchers angepasst.
  • Verwende Videos mit einem horizontalen oder querformatigen Seitenverhältnis, z. B. 16:9, um das Zuschneiden zu minimieren.
  • Versuche, Videos zu finden oder aufzunehmen, bei denen das Motiv des Videos zentriert ist und etwas Platz um es herum vorhanden ist, sodass es sicher zugeschnitten werden kann.
Die Anzahl der Hintergrundvideos pro Seite beschränken
Wähle Videos mit fließenden Übergängen
  • Um deine Videos zugänglich zu halten, vermeide Inhalte in deinem Video, die dreimal oder öfter in einem Zeitraum von einer Sekunde aufleuchten.
  • Berücksichtige Übergänge und vermeide schnelle Schnitte oder übermäßiges Schwenken. Scheinbar springende Videos können für die Besucher störend wirken.
Kontrast zu Text Mehr Informationen über den Farbkontrast findest du unter Deine Squarespace-Website barrierefrei machen.

Schritt 1 – Deine Videodatei oder URL vorbereiten

Um ein Hintergrundvideo hinzuzufügen, kannst du deine Videodatei in Version 7.1 auf einen Abschnittshintergrund hochladen. Du kannst dein Video auch auf YouTube oder Vimeo hochladen und die URL zum Teilen finden.

Hinweis

Stelle sicher, dass die URL keinen Zeitstempel für einen bestimmten Abschnitt des Videos enthält, da dies verhindert, dass es geladen wird.

Dein Video hochladen

Um deine Videodatei für den Upload vorzubereiten, stelle sicher, dass dein Video unsere Anforderungen für das Hochladen von Videos erfüllt. Beachte, dass das Längenlimit für hochgeladene Hintergrundvideos 60 Sekunden beträgt.

YouTube

  1. Erstelle ein Konto oder melde dich bei YouTube an.
  2. Lade ein Video hoch oder wähle eines aus, das du bereits hochgeladen hast.
  3. Stelle sicher, dass das Video auf Nicht-öffentlich oder Öffentlich eingestellt ist und das Einbetten ermöglicht .
  4. Kopiere die URL zum Teilen des Videos.

Vimeo

  1. Erstelle ein Konto oder melde dich bei Vimeo an.
  2. Lade ein Video hoch oder wähle eines aus, das du bereits hochgeladen hast.
  3. Stelle sicher, dass die Datenschutzeinstellungen des Videos auf Öffentlich oder Vor Vimeo verbergen eingestellt sind. Ermögliche das Einbetten Überall oder auf bestimmten Domains. Wenn du die Einbettung nur auf bestimmten Domains zulassen möchtest, stelle sicher, dass du die Domain deiner eigenen Website im angezeigten Textfeld hinzufügst.
  4. Kopiere die URL zum Teilen des Videos.

Schritt 2 - Das Video hinzufügen

Die Schritte zum Hinzufügen eines Videos hängen von der Version deiner Website ab und wo du das Video hinzufügst.

Tipp

Bis du deine URL hinzugefügt hast, siehst du eine kurze Videoaufnahme eines Meeres als Platzhalter.

Abschnittshintergründe

Du kannst Hintergrundvideos zu allen Abschnitten außer Blog-, Event-, Galerie- und Shop-Abschnitten hinzufügen. Stelle sicher, dass dein Video unseren Videoanforderungen entspricht. So fügst du ein Hintergrundvideo hinzu:

  1. Öffne das Seiten-Menü und klicke auf die Seite mit dem Abschnitt, den du bearbeiten möchtest.
  2. Klicke in der linken oberen Ecke auf Bearbeiten.
  3. Klicke auf das Stift-Symbol des Abschnitts und dann auf Hintergrund.
  4. Klicke auf Video und anschließend auf das Symbol +. Wähle eine Videoquelle aus dem Drop-down-Menü aus. Ausführliche Schritte findest du im folgenden Abschnitt.
  5. Scrolle nach unten, um andere Videoeinstellungen anzupassen.
  6. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen. 

Ein Video wählen

Nachdem du auf das Symbol + geklickt hast, wähle aus, wie du dein Video hinzufügen möchtest:

Seitenbanner

In einigen Vorlagen kannst du einem Websiteseitenbanner einen Videohintergrund hinzufügen. Das erzeugt einen großartigen visuellen Effekt, wenn du ihn mit Text-Overlays kombinierst.

  1. Öffne das Menü „Seiten“.
  2. Bewege den Mauszeiger auf den Seitentitel im linken Bereich und klicke dann auf „das.
  3. Klicke auf den Tab Medien.
  4. Klicke im Tab Medien auf den den Tab Video.
  5. Kopiere die URL deines Videos in das Feld Video URL.

Unterstützte Templates

Du kannst Banner-Videos zu den aufgeführten Seitentypen für diese Template-Gruppen hinzufügen:

  • Adirondack – Layout, Produkte, Album, Events, Blog
  • Bedford – Layout, Produkte, Album, Events, Blog
  • Brine – Layout, Album, Events, Blog
  • Five – Layout, Album, Events, Blog
  • Montauk – Layout, Events, Blog, Index (muss ein Ersatzbild für Mobilgeräte haben)
  • Pacific – Layout, Produkte, Album, Events, Blog
  • Tremont – Layout, Produkte, Album, Events und Blog
  • York - Layout, Produkte, Album, Events, Blog, Projekt, Index

Video-Banner auf Seiten in einem Index

Du kannst in diesen Template-Gruppen Video-Banner zu den Seiten in Index-Seiten hinzufügen:

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

So fügst du das Video hinzu:

  1. Öffne die Einstellungen der untergeordneten Seite.
  2. Klicke auf Medien und dann auf Video.
  3. Führe die Schritte oben aus, um die URL des Videos hinzuzufügen.

Hintergrund der Cover-Seite

So fügst du das Video einer Cover-Seite hinzu:

  1. Öffne eine vorhandene Cover-Seite oder füge eine neue hinzu.
  2. Klicke auf Media (Medien).
  3. Klicke im Medien-Menü auf den Reiter Video.
  4. Füge die URL zum Teilen deines Videos in das Feld Video URL ein.

Unterstützte Layouts

In den meisten Layouts für Cover-Seiten werden Videos in einem Vollbild-Hintergrund, der sich bis zum Rand des Browsers erstreckt, hinter dem Inhalt der Cover-Seite abgespielt.

Es gibt einige Ausnahmen:

  • Wird im Seitenmenü angezeigt – Backstory, Flash, Hervorheben, Sitzung, Vignette
  • Wird im runden Porträtbereich angezeigt – Focus, Monocle
  • Unterstützt keine Videos – Flagship, Harbor

Sperrbildschirm

Du kannst dem Sperrbildschirm anstelle eines Bildes oder einer Slideshow ein Hintergrundvideo hinzufügen. Alle Websites unterstützen Sperrbildschirme.

So fügst du ein Video zu deinem Sperrbildschirm hinzu:

  1. Öffne das Sperrbildschirm-Menü.
  2. Klicke auf Lock Screen (Sperrbildschirm).
  3. Klicke auf Media (Medien).
  4. Klicke auf den Reiter Video.
  5. Kopiere die URL deines Videos in das Feld Video URL.

Schritt 3 – Eine Hintergrundbreite auswählen

Hintergrundvideos können randlos oder eingerückt von den Rändern des Abschnitts angezeigt werden.

  • Randlos erweitert das Bild von einem Rand deines Browserfensters zum anderen <, sodass es sich über die gesamte Breite deiner Website erstreckt.
  • DurchEinrückung wird das Bild leicht eingerückt und ein Rahmen um das Bild herum erstellt.

Wenn das Bild auf „Einrückung“ gesetzt ist, kannst du die Rahmenfarbe festlegen:

Schritt 4 – Einen Filter hinzufügen

Filter verändern das Erscheinungsbild des Videos und fügen einen speziellen Style hinzu. Darüber hinaus haben Filter auch Einfluss auf das Fallback-Bild für Mobilgeräte eines Videos. Der Filtereffekt hängt von der Farbe und der bildlichen Darstellung des Videos ab. Daher empfehlen wir, verschiedene Möglichkeiten auszuprobieren, bis du den gewünschten Effekt gefunden hast.

Um einen Filter hinzuzufügen, klicke auf das Dropdown-Menü Filter im Tab Video. Für alle Filter außer Invertieren kannst du die Stärke mit dem Schieberegler anpassen. Filtereffekte können je nach Browser unterschiedlich gerendert werden.

Du kannst den Filter Deckkraft verwenden, um eine Overlay-Farbe hinzuzufügen. Klicke auf den Tab Farben, um ein Farbdesign für das Overlay und alle hinzugefügten Inhalte auszuwählen. Weitere Informationen findest du unter Farben ändern. Wenn du das Video entfernst, nimmt das Overlay die Hintergrundfarbe des Abschnitts an.

Schritt 5 – Abspielgeschwindigkeit ändern

Wenn du einen URL-Link von YouTube oder Vimeo verwendest, kannst du die Einstellung unter Abspielgeschwindigkeit ändern, um die Wiedergabegeschwindigkeit deines Videos zu erhöhen oder zu verringern. Die Standardgeschwindigkeit beträgt 1x, was bedeutet, dass das Video mit normaler Geschwindigkeit abgespielt wird.

Schritt 6 – Ein Ersatzbild für Mobilgeräte hinzufügen

Mobile Browser unterstützen Hintergrundvideos, aber je nach Verbindungsgeschwindigkeit und Browser-Version werden Banner-Videos eventuell nicht für jeden Besucher geladen. Du kannst ein Ersatzbild für Mobilgeräte festlegen, das erscheint, wenn das Banner-Video nicht geladen werden kann. Die Filtereinstellungen gelten auch für das Ersatzbild für Mobilgeräte. Um optimale Ergebnisse zu erzielen, formatiere dein Bild für die Web-Anzeige, bevor du es hochlädst.

Wie du ein Ersatzbild für Mobilgeräte hinzufügst, hängt von der Version deiner Website ab. So fügst du ein Ersatzbild für Mobilgeräte hinzu:

  1. Klicke auf der Seite auf Bearbeiten und dann auf das Bleistiftsymbol im Abschnitt mit dem Videohintergrund.
  2. Klicke auf Hintergrund und dann auf Video.
  3. Klicke unter Ersatzbild für Mobilgeräte auf Bild hinzufügen, um ein Bild hochzuladen, oder klicke auf Bilder suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen. 

Das Ersatzbild für Mobilgeräte wird auch angezeigt, während das Video geladen wird.

Wenn du kein Ersatzbild für Mobilgeräte hinzufügst, wird auf Mobilgeräten stattdessen eine Hintergrundfarbe angezeigt. Diese Farbe wird durch die Abschnittsfarben festgelegt.

  1. Scrolle im Menü Medien im Tab Video nach unten zu Ersatzbild für Mobilgeräte.
  2. Klicke auf Bild hochladen oder Nach Bild suchen, um ein Bild wiederzuverwenden oder ein Agenturbild hinzuzufügen.
  3.  Klicke auf Save (Speichern).

Wenn du kein Ersatzbild für Mobilgeräte hinzufügst, wird stattdessen eine Hintergrundfarbe auf Mobilgeräten angezeigt. Du kannst diese Farbe in diesen Template-Gruppen auswählen:

  • Adirondack – Anpassung Inhaltshintergrundfarbe
  • Bedford – Anpassung Banner-Overlay-Farbe
  • Brine – Anpassung Overlay-Farbe
  • Five – Anpassungen Banner-Overlay-Farbe und Hintergrund der Kopfzeile
  • Montauk – Anpassung Leinwand-Hintergrund
  • Pacific – Anpassung Overlay-Farbe
  • Tremont – Anpassung Website-Hintergrundfarbe
  • York – Anpassung Hintergrundfarbe

Verwende für Cover-Seiten die Anpassung Hintergrund: Farbe.

Tipp

Füge eine animierts .gif als Ersatzbild für Mobilgeräte hinzu, um einen ähnlichen Effekt wie das Video zu erzeugen.

Hintergrundvideo löschen oder deaktivieren

Um ein vorhandenes Hintergrundvideo zu entfernen, kannst du das Video deaktivieren oder löschen. Um Hintergrundvideos zu deaktivieren, wechsle zu einem Hintergrundbild. Auf diese Weise ersetzt das festgelegte Bild das Hintergrundvideo. Es ist nur möglich, Hintergrundvideos auf Websites der Version 7.1 zu löschen. Wenn du ein Video löschst, wird Speicherplatz für Videos auf deiner Website freigegeben.

So deaktivierst du dein Hintergrundvideo:

  1. Klicke auf der Seite auf Bearbeiten und dann auf das Bleistiftsymbol im Abschnitt mit dem Video.
  2. Klicke auf Hintergrund und dann auf Bild.
  3.  Klicke auf Save (Speichern).

Jede Website bietet Speicherplatz für 30 Minuten Videomaterial. Wenn du dieses Limit erreicht hast, kannst du Videos löschen, um Speicherplatz freizugeben. Weitere Informationen findest du unter Bilder und Videos verwalten und wiederverwenden.

  1. Bewege im Seiten-Menü den Mauszeiger über den Seitentitel im linken Menü und klicke auf „das.
  2. Klicke auf Medien und dann auf Bild.
  3.  Klicke auf Save (Speichern).

Wenn du eine Cover-Seite verwendest, kannst du auch die Option Keines auswählen, um das Video durch eine Hintergrundfarbe zu ersetzen

Ein Video ansehen (Version 7.0)

Dieses Video bezieht sich auf Squarespace-Version 7.0.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Hintergrundvideos hinzufügen