Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Hintergrundvideos hinzufügen

Verwende Hintergrundvideos, um deiner Website dynamische visuelle Effekte hinzuzufügen. 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 Schleife abgespielt und haben keinen Ton. Für Hintergrundvideos gibt es folgende Optionen:

Für ein benutzerdefiniertes Erscheinungsbild können Sie auch stilisierte Filter und Overlay-Farben anwenden.

Tipp: Du kannst auch animierte Hintergründe mit Bildeffekten und einzigartigen Creative Backgrounds hinzufügen. Um mehr zu erfahren, besuche Animationen und Bildeffekte.

Bevor Sie beginnen

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, befolge unsere Design-Tipps. Sollte sich die Qualität nicht verbessern, wende dich bitte an deinen Video-Hosting-Service.
  • Während Video-Banner, die unseren Design-Tipps folgen, auf Computern angezeigt werden sollten, erscheinen Videos je nach Verbindungsgeschwindigkeit und Browserversion des Besuchers möglicherweise nicht immer auf Mobilgeräten. Lege ein Ersatzbild für Mobilgeräte fest, das angezeigt wird, wenn das Video-Banner 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.

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

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 Sie überlegen, welche Videos im Hintergrund verwendet werden sollen, befolgen Sie 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. Denken Sie 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.
Die Anzahl der Hintergrundvideos pro Seite beschränken
Wählen Sie Videos mit fließenden Übergängen
  • Um Ihre Videos zugänglich zu halten, vermeiden Sie Inhalte in Ihrem Video, die dreimal oder öfter in einem Zeitraum von einer Sekunde aufleuchten.
  • Berücksichtigen Sie Übergänge und vermeiden Sie 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 finden Sie unter Ihre Squarespace-Website zugänglicher 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 zum Hochladen von Videos erfüllt.

YouTube

  1. Erstellen Sie ein Konto oder melden Sie sich bei YouTube an.
  2. Laden Sie ein Video hoch oder wählen Sie eines aus, das Sie bereits hochgeladen haben.
  3. Stelle sicher, dass das Video auf Nicht-öffentlich oder Öffentlich eingestellt ist und das Einbetten ermöglicht .
  4. Kopieren Sie die URL zum Teilen des Videos.

Vimeo

  1. Erstellen Sie ein Konto oder melden Sie sich bei Vimeo an.
  2. Laden Sie ein Video hoch oder wählen Sie eines aus, das Sie bereits hochgeladen haben.
  3. Stelle sicher, dass die Datenschutzeinstellungen des Videos auf Alle festgelegt sind und das Einbetten Überall möglich ist oder Dieses Video auf Vimeo.com ausblenden zulässt und das Einbetten nur auf Websites zulässt, die ich ausgewählt habe.
  4. Kopieren Sie 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- und Shop-Abschnitten hinzufügen. Stelle sicher, dass dein Video unseren Videoanforderungen entspricht. So fügst du ein Hintergrundvideo hinzu:

  1. Klicken Sie im Hauptmenü auf Seiten und dann auf die Seite mit dem Abschnitt, den Sie bearbeiten möchten.
  2. Klicken Sie 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. Scrollen Sie nach unten, um andere Videoeinstellungen anzupassen.
  6. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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 Templates können Sie einem Website-Seiten-Banner einen Videohintergrund hinzufügen. Das erzeugt einen großartigen visuellen Effekt, wenn Sie ihn mit Text-Overlays kombinieren.

  1. Klicken Sie im Hauptmenü auf Seiten.
  2. Bewege den Mauszeiger auf den Seitentitel im linken Bereich und klicke dann auf „das.
  3. Klicken Sie auf den Tab Medien.
  4. Klicken Sie im Tab Medien auf den den Tab Video.
  5. Kopieren Sie die URL Ihres 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

Sie können in diesen Template-Gruppen Video-Banner zu den Seiten in Index-Seiten hinzufügen:

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

So fügen Sie 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ügen Sie das Video einer Cover-Seite hinzu:

  1. Öffne eine vorhandene Cover-Seite oder füge eine neue hinzu.
  2. Klicken Sie auf Media (Medien).
  3. Klicken Sie im Medien-Menü auf den Reiter Video.
  4. Fügen Sie die URL zum Teilen Ihres 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ügen Sie ein Video zu Ihrem Sperrbildschirm hinzu:

  1. Klicken Sie im Hauptmenü auf Design.
  2. Klicken Sie auf Lock Screen (Sperrbildschirm).
  3. Klicken Sie auf Media (Medien).
  4. Klicken Sie auf den Reiter Video.
  5. Kopieren Sie die URL Ihres Videos in das Feld Video URL.

Schritt 3 - 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 Sie den gewünschten Effekt gefunden haben.

Um einen Filter hinzuzufügen, klicken Sie im Tab Video auf das Dropdown-Menü Filter. Für alle Filter außer Invertieren können Sie die Stärke mit dem Schieberegler anpassen. Filtereffekte können in allen Browsern unterschiedlich gerendert werden.

Schritt 4 – Wiedergabegeschwindigkeit ändern

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

Schritt 5 - Ein Fallback-Bild 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. Klicken Sie 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. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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.  Klicken Sie 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.  Klicken Sie 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. Es ist nicht möglich, mehr als ein Video gleichzeitig zu löschen.

So löschst du ein Hintergrundvideo für Abschnitte:

  1. Klicke in deinem Abschnittseditor auf Hintergrund.
  2. Klicke auf Video und anschließend auf das Symbol +.
  3. Klicke auf Aus der Bibliothek auswählen.
  4. Markiere das Video, das du löschen möchtest, und klicke dann auf Löschen.
  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.  Klicken Sie 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 anschauen

Dieses Video bezieht sich auf Squarespace-Version 7.0.

War dieser Beitrag hilfreich?
211 von 479 fanden dies hilfreich
Hintergrundvideos hinzufügen