Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Ein Hintergrund Video hinzufügen

Sie können Hintergrundvideos in Cover-Seiten und die Seitenbanner einiger Templates einbetten. Hintergrundvideos werden in einer Endlosschleife ohne Ton abgespielt und verleihen Ihrer Website einen dynamischen visuellen Effekt.

Hintergrundvideos werden über die Video-Share-URLs von Vimeo oder YouTube geladen. Sie können die Darstellung anpassen, indem Sie Style-Filter und Overlay-Farben anwenden.

Bevor Sie beginnen

Allgemeine Hinweise

  • Während das Video lädt, wird die Hintergrundfarbe einer Seite oder eines Banners angezeigt. Wenn der Ladevorgang des Videos einige Sekunden dauert, könnte auch das Fallback-Bild angezeigt werden. Die Ladezeit hängt von Ihrer Internetverbindung ab.
  • Mobile Browser unterstützen keine Hintergrundvideos. Auf Mobilgeräten können Sie jedoch ein Fallback-Bild für Mobilgeräte anstatt des Hintergrundvideos anzeigen.
  • 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.

YouTube

  • Stellen Sie das Video auf Öffentlich/Nicht gelistet und erlauben Sie die Einbettung. Private YouTube-Videos werden nicht als Hintergrundvideos angezeigt.
  • Deaktivieren Sie Overlay-Anzeigen. Wenn Ihr Video Overlay-Anzeigen aktiviert hat, wird Werbung über dem Hintergrundvideo angezeigt.
  • Je nach gewähltem Layout und dem verwendeten Gerät Ihrer Besucher könnte in der rechten unteren Ecke eines Videos kurzzeitig ein YouTube-Logo erscheinen. Dieses Logo lässt sich subtiler gestalten, indem Sie den Schärfefilter für Ihr Video verwenden.
  • Video-Anzeigen, die vor einem Video abgespielt werden (auch Pre-Roll-Ads genannt), werden bei Hintergrundvideos nicht abgespielt.

Vimeo

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.

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. Vergewissern Sie sich, dass das Video auf Nicht gelistet/öffentlich eingestellt ist und das Einbetten erlaubt.
  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. Vergewissern Sie sich, dass das Video auf Anyone (Alle) eingestellt ist und das Einbetten erlaubt.
  4. Kopieren Sie die URL zum Teilen des Videos.

Schritt 2 - Das Video hinzufügen

Die Schritte zum Hinzufügen eines Videos sind für Cover-Seiten und Website-Seitenbanner unterschiedlich. Befolgen Sie die unten aufgeführten Anweisungen, je nachdem, von wo aus Sie das Video hinzufügen.

Hinweis: Bis Sie Ihre URL hinzugefügt haben, sehen Sie eine kurze Videoaufnahme des Meeres als Platzhalter.

Hintergrund von Cover-Seiten

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

  1. Öffnen Sie eine vorhandene Cover-Seite oder fügen Sie eine neue Seite hinzu:
    • Für Cover-Seiten-Websites mit einer einzigen Seite: Klicken Sie Im Home Menu (Hauptmenü) auf Media (Medien).
    • Für Cover-Seiten, die zu Websites oder Shops hinzugefügt wurden: Klicken Sie im Home Menu (Hauptmenü) auf Pages (Seiten).
  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 jedoch einige Ausnahmen. Die folgenden Layouts zeigen Videos anders an:

  • Flash - wird im seitlichen Menü angezeigt
  • Spotlight - wird im seitlichen Menü angezeigt
  • Vignette - wird im seitlichen Menü angezeigt
  • Backstory - wird im seitlichen Menü angezeigt
  • Session - wird im seitlichen Menü angezeigt
  • Focus - wird im runden Portraitbereich angezeigt
  • Monocle - wird im runden Portraitbereich angezeigt
  • Flagship - Video wird nicht unterstützt
  • Harbor - Video wird nicht unterstützt

Seitenbanner

In einigen Templates können Sie anstatt eines statischen Banner-Bildes einen Videohintergrund zu einem Seitenbanner der Website hinzufügen. Dies erzeugt einen großartigen visuellen Effekt, wenn Sie ihn mit Text-Overlays kombinieren.

So fügen Sie das Video zu einem Seitenbanner hinzu:

  1. Klicken Sie im Home Menu (Hauptmenü) auf Pages (Seiten).
  2. Fahren Sie mit der Maus über den Seitentitel im linken Menü und klicken Sie dann auf .
  3. Klicken Sie auf den Reiter Media (Medien).
  4. Klicken Sie im Reiter Media (Medien) auf den Reiter Video.
  5. Kopieren Sie die URL Ihres Videos in das Feld Video URL.

Unterstützte Templates

Folgende Templates unterstützen Banner-Videos auf den aufgeführten Seitenarten. Die Templates sind in Gruppen eingeteilt.

Adirondack Normale Seiten sowie Produkt-, Album-, Event- und Blog-Seiten
Bedford, Anya, Bryant, Hayden Normale Seiten sowie Produkt-, Album-, Event- und Blog-Seiten
Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne Normale Seiten sowie Album-, Event- und Blog-Seiten
Five Normale Seiten sowie Album-, Event- und Blog-Seiten
Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift Normale Seiten sowie Produkt-, Event- und Blog-Seiten
Montauk, Julia, Kent, Om Normale Seiten sowie Event-, Blog- und Index-Seiten (erstellt ein Banner auf der Index-Seite; Index-Raster-Vorschaubilder zeigen keine Videos an)
Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi Normale Seiten sowie Produkt-, Album-, Event- und Blog-Seiten
Tremont, Carson, Henson Normale Seiten sowie Produkt-, Album-, Event- und Blog-Seiten
York, Artesia, Harris, Lange, Jasper, Shibori, Taylor Normale Seiten sowie Produkt-, Album-, Event-, Blog- und Projekt-Seiten

Sperrbildschirm

Anstatt eines Bildes oder einer Slideshow können Sie auch ein Hintergrundvideo zu Ihrem Sperrbildschirm hinzufügen. Sperrbildschirme werden von allen Templates unterstützt.

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. 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.

So fügen Sie einen Filter hinzu:

Klicken Sie auf das Drop-Down-Menü Filter im Reiter Video und wählen Sie zwischen:

  • Blur (Weichzeichnen)
  • Brightness (Helligkeit)
  • Contrast (Kontrast)
  • Invert (Umkehren)
  • Opacity (Undurchsichtigkeit)
  • Saturate (Sättigen)
  • Sepia (Sepia)

Mit Ausnahme von Invert (Umkehren) können Sie die Stärke aller Filter mit dem Schieberegler anpassen.

Hinweis: Filtereffekte können in verschiedenen Browsern unterschiedlich dargestellt 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. Sie können zwischen vier verschiedenen Geschwindigkeiten wählen:

  • 0,5 x (langsam)
  • 1 x (normal)
  • 1,5 x (schneller)
  • 2 x (schnellste)

Schritt 5 - Ein Fallback-Bild für Mobilgeräte hinzufügen

Mobile Browser unterstützen keine Hintergrundvideos. Sie können jedoch ein Fallback-Bild für Mobilgeräte festlegen, das auf Mobilgeräten das Hintergrundvideo ersetzt. Um beste Ergebnisse zu erzielen, formatieren Sie Ihr Bild für die Web-Anzeige, bevor Sie es hochladen.

Um ein Fallback-Bild für Mobilgeräte einzurichten, ziehen Sie das Bild in den Bild-Uploader oder benutzen Sie ein lizenziertes Bild von Getty Images und klicken Sie dann auf Save (Speichern).

Wenn Sie kein Fallback-Bild für Mobilgeräte hinzufügen, wird stattdessen eine Hintergrundfarbe auf dem Mobilgerät angezeigt. Sie können diese Farbe über die folgenden Anpassungen im Style Editor festlegen. Die Templates sind in Gruppen eingeteilt.

Cover-Seiten Background: Color (Hintergrund: Farbe)
Adirondack Content Background Color (Inhalts-Hintergrundfarbe)
Bedford, Anya, Bryant, Hayden Banner Overlay Color (Banner-Overlay-Farbe)
Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne Overlay Color (Overlay-Farbe)
Five Banner Overlay Color / Header Background (Banner-Overlay-Farbe / Kopfzeilen-Hintergrund)
Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift Image Overlay Color / Content Background Color (Bild-Overlay-Farbe / Inhalts-Hintergrundfarbe)
Montauk, Julia, Kent, Om Canvas Background (Leinwand-Hintergrund)
Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi Overlay Color (Overlay-Farbe)
Tremont, Carson, Henson Site Background Color (Website-Hintergrundfarbe)
York, Artesia, Harris, Lange, Jasper, Shibori Background Color (Hintergrundfarbe)

Schritt 6 - Eine Overlay-Farbe hinzufügen (nur Cover-Seiten)

Overlays fügen Hintergrundvideos auf Cover-Seiten einen Farbstich hinzu. Serienmäßig ist die Farbe eine Grautönung, die zu Ihrem Video passt. Da der visuelle Effekt dieser Einstellungen nicht nur von Ihrem Video sondern auch davon abhängt, ob Sie einen Filter verwenden oder nicht, empfehlen wir, verschiedene Farben und Überlagerungen auszuprobieren, bis Sie eine Kombination finden, die ideal zu Ihrem Video passt.

So ändern Sie die Overlay-Farbe:

  1. Klicken Sie im Cover-Seiten Menü oder Home Menu (Hauptmenü) auf Style.
  2. Scrollen Sie hinunter zu Video Background (Video-Hintergrund).
  3. Klicken Sie auf Custom Overlay Color (Benutzerdefinierte Overlay-Farbe).
  4. Wählen Sie aus dem Rad eine neue Farbe aus.
  5. Sie können auch einen Overlay Color Blend Mode (Overlay-Farbmischmodus) aus dem Drop-Down-Menü auswählen, um das Aussehen der Farbe zu ändern.
Für Website-Seitenbanner: Wenn Ihr Template Banner-Text-Overlays oder eine Banner-Overlayfarbe unterstützt, wird dies über dem Banner-Video angezeigt. Website-Banner-Overlays bieten keinen Overlay-Farbmischmodus.

Das Hintergrundvideo deaktivieren

Um das Hintergrundvideo zu deaktivieren, wechseln Sie zu einem Hintergrundbild.

Klicken Sie im Reiter oder im Menü Media (Medien) auf Image (Bild) und dann auf Save (Speichern). Das gewählte Bild ersetzt dann das Hintergrundvideo.

Wenn Sie eine Cover-Seite benutzen, können Sie auch die Option None (Keines) auswählen, um das Video durch eine Hintergrundfarbe zu ersetzen. 

Video-Banner in einem Index

Bei bestimmten Templates können Sie Video-Banner zum Index hinzufügen. Die Templates sind in Gruppen eingeteilt.

  • Bedford, Anya, Bryant, Hayden
  • Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift
  • Montauk, Julia, Kent, Om
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
  • York, Artesia, Harris, Lange, Jasper, Shibori
War dieser Beitrag hilfreich?
45 von 70 fanden dies hilfreich
Ein Hintergrund Video hinzufügen