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

Hintergrundvideos hinzufügen

Verwende Hintergrundvideos, die in einer Schleife abgespielt werden, 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. Für Hintergrundvideos hast du folgende Optionen:

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

Bevor Sie beginnen

Allgemeine Hinweise

  • 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 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.
  • Befolge unsere Tipps für barrierefreie Videos, um deinen Besuchern ein qualitativ hochwertiges Seherlebnis zu bieten.
  • Es gibt kein Zeitlimit für eingebettete Videos von Drittanbietern. Wenn du ein Hintergrundvideo hochlädst, beträgt die maximale Länge 60 Sekunden. Kürzere Videos in Endlosschleife zeigen die Hintergrundfarbe möglicherweise häufiger an.
  • 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 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, Ihre Website visuelle ansprechender zu gestalten, sollten jedoch nicht von den eigentlichen Inhalten Ihrer Website ablenken. Hier sind ein paar Best Practices, mit denen Ihr Hintergrundvideo stets großartig aussieht.

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.
  • Verwende eine Auflösung von 1080p und eine Bitrate von mindestens 3 Mbps.
  • Ideal ist eine Videolänge von unter 40 Sekunden.
  • 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 – Die URL Ihres Videos suchen

Um ein Hintergrundvideo hinzuzufügen, lade es auf YouTube oder Vimeo hoch und suche die URL zum Teilen. Es ist nicht möglich, ein Video direkt auf Squarespace hochzuladen oder von einem anderen Service gehostete Videos einzubetten.

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

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. 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 dann auf das +. Wähle Datei hochladen aus, um ein Video von deinem Gerät hinzuzufügen, oder klicke auf Mit Link hinzufügen, um eine Vimeo- oder YouTube-URL hinzuzufügen. Nachdem du einen Link hinzugefügt hast, klicke auf Speichern.
  5. Scrollen Sie nach unten, um andere Videoeinstellungen anzupassen.
  6. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

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.

Das Hintergrundvideo deaktivieren

Um das Hintergrundvideo zu deaktivieren, wechsle zu einem Hintergrundbild. Das gewählte Bild ersetzt das 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).
  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?
203 von 461 fanden dies hilfreich
Hintergrundvideos hinzufügen