Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Ein Hintergrund Video hinzufügen

You can embed background videos from YouTube and Vimeo on Cover Pages and some templates' page banners. Background videos play on loop without sound and add a dynamic visual effect to your site.

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.

Ein Video anschauen

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 Ihrer Internetverbindung ab.
  • Hintergrundvideos werden in mobilen Browsern auf Smartphones und Tablets nicht unterstützt. Auf Mobilgeräten können Sie anstatt des Hintergrundvideos jedoch ein Fallback-Bild für Mobilgeräte 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.
  • Hintergrundvideos unterstützen keinen Einbettungscode.

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

  • Sie müssen über ein Vimeo Plus-, PRO- oder Geschäftskonto verfügen, um ein Hintergrundvideo von Vimeo hinzufügen zu können.
  • Bearbeiten Sie Ihre Datenschutzeinstellungen für Vimeo, um sicherzustellen, dass Ihre Videos eingebettet werden können. Stellen Sie das Video auf Alle und erlauben Sie die Einbettung überall. Private Vimeo-Videos werden nicht als Hintergrundvideos abgespielt.
  • Sie können auch das Video vor Vimeo.com verbergen und die Einbettung nur auf von mir ausgewählten Seiten erlauben.

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.

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).
  • Klicken Sie auf Media (Medien).
  • Klicken Sie im Medien-Menü auf den Reiter Video.
  • 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 Standard-Seiten sowie Produkt-, Album-, Event- und Blog-Seiten

    Bedford-Gruppe

    Anya, Bryant, Bedford, Hayden

    Standard-Seiten sowie Produkt-, Album-, Event- und Blog-Seiten

    Brine-Gruppe

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Standard-Seiten sowie Album-, Event- und Blog-Seiten
    Five Standard-Seiten sowie Album-, Event- und Blog-Seiten

    Montauk-Gruppe

    Julia, Kent, Montauk, Om

    Standard-Seiten sowie Event-, Blog- und Index-Seiten (erstellt ein Banner auf der Index-Seite; Index-Raster-Vorschaubilder zeigen keine Videos an)

    Pacific-Gruppe

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Standard-Seiten sowie Produkt-, Album-, Event- und Blog-Seiten

    Tremont-Gruppe

    Camino, Carson, Henson, Tremont

    Standard-Seiten sowie Produkt-, Album-, Event- und Blog-Seiten

    York-Gruppe

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

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

    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. Die Filtereinstellungen gelten auch für das Fallback-Bild. Um beste Ergebnisse zu erzielen, formatieren Sie Ihr Bild für die Web-Anzeige, bevor Sie es hochladen.

    Ein Fallback-Bild für Mobilgeräte einrichten:

    1. Klicken Sie im Medien-Menü auf den Reiter Video.
    2. Scroll down and drag your image into the image uploader. You can also use a stock image.
    3.  Klicken Sie auf Save (Speichern).
    Tip: Ein animiertes .gif als Fallback-Bild für Mobilgeräte für einen ähnlichen Effekt hinzufügen.

    If you don't add a mobile fallback image, a background color will display on mobile instead. You can choose this color with the following Site Styles tweaks. Templates are grouped by family.

    Cover-Seiten Background: Color (Hintergrund: Farbe)
    Adirondack Content Background Color (Inhalts-Hintergrundfarbe)

    Bedford-Gruppe

    Anya, Bryant, Bedford, Hayden

    Banner Overlay Color (Banner-Overlay-Farbe)

    Brine-Gruppe

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Overlay Color (Overlay-Farbe)
    Five Banner Overlay Color / Header Background (Banner-Overlay-Farbe / Kopfzeilen-Hintergrund)

    Montauk-Gruppe

    Julia, Kent, Montauk, Om

    Canvas Background (Leinwand-Hintergrund)

    Pacific-Gruppe

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Overlay Color (Overlay-Farbe)

    Tremont-Gruppe

    Camino, Carson, Henson, Tremont

    Site Background Color (Website-Hintergrundfarbe)

    York-Gruppe

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    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-Gruppe - Anya, Bryant, Bedford, Hayden
    • Brine-Gruppe - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
    • Montauk-Gruppe - Julia, Kent, Montauk, Om
    • Pacific-Gruppe - Charlotte, Fulton, Horizon, Naomi, Pacific
    • York-Gruppe - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    Öffnen Sie die Einstellungen der Unterseite und klicken Sie zunächst auf Media (Medien) und dann auf Video, um das Video hinzuzufügen. Führen Sie anschließend die Schritte oben aus, um die URL des Videos hinzuzufügen.

    War dieser Beitrag hilfreich?
    123 von 216 fanden dies hilfreich
    Ein Hintergrund Video hinzufügen