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

Hintergrundvideos hinzufügen

Du kannst Hintergrundvideos von YouTube und Vimeo in Seitenabschnitten, Bannern und anderen Bereichen einbetten, abhängig von der Version deiner Website. Hintergrundvideos werden ohne Ton in einer Schleife wiedergegeben und fügen deiner Website einen dynamischen visuellen Effekt hinzu. Für ein individuelles Erscheinungsbild kannst du 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 Fallback-Bild für Mobilgeräte angezeigt wird. Die Ladezeit hängt von der Internetverbindung ab.
  • Video-Banner werden je nach Verbindungsgeschwindigkeit des Besuchers und Browser-Version gelegentlich nicht auf Mobilgeräten angezeigt. Lege ein Ersatzbild für Mobilgeräte fest, das erscheint, wenn das Video-Banner nicht geladen werden kann.
  • Im Hinblick auf die Videolänge besteht keinerlei zeitliche Beschränkung. Bedenken Sie jedoch, dass die Hintergrundfarbe unter Umständen häufiger angezeigt wird, wenn kürzere Videos in Endlossschleife abgespielt werden.
  • Hintergrundvideos unterstützen keine Embed-Codes.

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 visuell ansprechender zu gestalten. Diese Videos sollten jedoch nicht vom eigentlichen Inhalt Ihrer Website ablenken. Hier finden Sie einige Best Practices, mit deren Hilfe Ihre Hintergrundvideos stets großartig wirken.

Kleine Videodateien verwenden

Die Länge und Auflösung eines Videos sind für die Dateigröße ausschlaggebend. Große Videodateien erfordern mehr Ladezeit und können je nach Internetverbindung des Besuchers dazu führen, dass die Wiedergabe eines Videos unterbrochen wird.

Auch wenn keine offizielle zeitliche Beschränkung besteht, empfehlen wir, nach Möglichkeit Hintergrundvideos von maximal 40 Sekunden Länge zu verwenden. Kurze Videos lassen sich beispielsweise durch Inhalte realisieren, die bei Wiederholung fließend ineinander übergehen. Auf diese Weise erscheint das Video länger, erfordert jedoch weniger Speicherplatz.

Wir empfehlen die Verwendung von Videos mit: 

  • einer Framerate von etwa 25 Frames pro Sekunde.
  • einer Auflösung von 720p, was 1280 x 720 Pixeln entspricht.

Inhalte mit fließenden Übergängen wählen

Bei der Auswahl eines Videos sollten Sie auf Übergänge achten und schnelle Schnitte und übermäßiges Schwenken möglichst vermeiden. Scheinbar springende Videos fallen verstärkt ins Auge und können daher störend wirken.

Textkontrast sicherstellen

Ihr Hintergrundvideo sollte zu den Styles Ihrer Website passen, insbesondere im Hinblick auf die farbliche Gestaltung von Text, der über dem Video platziert wird. Vergewissern Sie sich, dass Ihr Text während des gesamten Videos für Besucher lesbar ist.

Falls es an Kontrast mangelt, können Sie:

Schritt 1 – Die URL Ihres Videos suchen

Um ein Hintergrundvideo hinzuzufügen, laden Sie es auf YouTube oder Vimeo hoch und suchen Sie die URL, um es zu teilen. Es ist nicht möglich, ein Video direkt auf Squarespace hochzuladen oder von einem anderen Service gehostete Videos einzubetten.

Hinweis: Stellen Sie 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 ermöglicht 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 von 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 Home Menu (Hauptmenü) auf Pages (Seiten).
  2. Klicke auf die Seite, auf der du das Video hinzufügen möchtest und klicke dann auf Bearbeiten.
  3. Bewege den Mauszeiger über den Abschnitt und klicke auf das Stiftsymbol.
  4. Klicken Sie auf Hintergrund und dann auf Video.
  5. Fügen Sie die URL Ihres Videos ins Feld Video ein.
  6. Scrollen Sie nach unten, um andere Videoeinstellungen anzupassen.
  7. 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 Home Menu (Hauptmenü) auf Pages (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

Sie können Banner-Videos zu den aufgeführten Seiten-Typen für diese Template-Gruppen hinzufügen:

  • Adirondack – Layout, Produkte, Album, Events, Blog
  • Bedford – Layout, Produkte, Album, Events, Blog
  • Brine – Layout-, Album-, Veranstaltungs- und Blogseiten
  • Five – Layout-, Album-, Veranstaltungs- und Blogseiten
  • 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. Klicken Sie auf Medien und dann auf Video.
  3. Führe die Schritte oben aus, um die URL des Videos hinzuzufügen.

Hintergrund von Cover-Seiten

Um das Video zu einer Cover-Seite hinzuzufügen:

  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 Home Menu (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 - Abspielgeschwindigkeit ändern (nur YouTube)

Wenn Sie eine Video-URL von YouTube benutzen, können Sie eine Abspielgeschwindigkeit auswählen, um die Wiedergabegeschwindigkeit des Videos zu ändern. 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. Sie können 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, formatieren Sie Ihr Bild für die Web-Anzeige, bevor Sie es hochladen.

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 Stiftsymbol im Abschnitt mit dem Video-Hintergrund.
  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 Bildersuchen, 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 stattdessen auf Mobilgeräten 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 Sie kein Ersatzbild für Mobilgeräte hinzufügen, wird stattdessen eine Hintergrundfarbe auf Mobilgeräten angezeigt. Sie können 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, wechseln Sie zu einem Hintergrundbild. Das gewählte Bild ersetzt dann das Hintergrundvideo.

  1. Klicke auf der Seite auf Bearbeiten und dann auf das Stiftsymbol im Abschnitt mit dem Video.
  2. Klicke auf Hintergrund und dann auf Bild.
  3. Klicken Sie auf Speichern.
  1. Bewege im Menü Seiten den Mauszeiger über den Seitentitel im linken Bereich und klicke auf „das.
  2. Klicke auf Medienund dann auf Bild.
  3. Klicken Sie auf 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?
173 von 350 fanden dies hilfreich
Hintergrundvideos hinzufügen