SeedProd Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

Video-Pop-up-Block

Der Video Pop-Up-Block ermöglicht es Ihnen, Videoinhalte von YouTube, Vimeo oder einer selbst gehosteten Quelle auf jeder SeedProd-Seite einzubetten. Im Gegensatz zu einem Standard-Einbettungsplayer unterstützt der Block den Lightbox-Modus, ein Sticky-Video, das Besuchern beim Scrollen folgt, und eine Bildüberlagerung, die als benutzerdefinierter Thumbnail fungiert – so haben Sie die volle Kontrolle darüber, wie Besucher Ihr Video entdecken und damit interagieren.

Ob Sie eine Produktdemo, ein Testimonial oder ein Erklärvideo präsentieren, der Video Pop-Up-Block bietet erweiterte Wiedergabeoptionen – einschließlich Autoplay, Stummschaltung, Schleife, Datenschutzmodus und einer Teaser-Video-Funktion –, damit Sie das Seherlebnis an Ihre Seiten- und Zielgruppenpräferenzen anpassen können.

Anforderungen: Der Video Pop-Up-Block ist in allen unseren Lizenzplänen verfügbar.


Hinzufügen des Video Pop-Up-Blocks zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Video Pop-Up-Block zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter Design > Blöcke den Video Pop-Up-Block in den gewünschten Bereich Ihrer Seite.

Ziehen des Video Pop Up-Blocks auf eine SeedProd-Seite

Schritt 2: Inhaltseinstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Video Pop-Up-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt sind die Einstellungen in vier Abschnitte unterteilt.

Video:

  • Quelle: Wählen Sie Ihre Videoquelle – YouTube, Vimeo oder Benutzerdefiniert (für selbst gehostete oder extern gehostete Videodateien).
  • YouTube-URL (nur YouTube): Geben Sie die vollständige URL des YouTube-Videos ein.
  • Vimeo-URL (nur Vimeo): Geben Sie die vollständige URL des Vimeo-Videos ein. Hinweis: Sticky Video erfordert ein Starter-, Standard-, Erweitertes-, Plus-, Pro-, Business-, Premium- oder Enterprise-Vimeo-Konto.
  • Externe URL / Benutzerdefinierte Video-URL (nur benutzerdefiniert): Aktivieren Sie Externe URL, um auf eine gehostete Videodatei zu verlinken, oder geben Sie die direkte URL zu Ihrem Video ein. Sie können auch Benutzerdefiniertes Video auswählen verwenden, um eine Datei aus Ihrer Mediathek auszuwählen.
  • Startzeit: Geben Sie eine Zeit (in Sekunden) an, ab der das Video abgespielt werden soll.
  • Endzeit: Geben Sie eine Zeit (in Sekunden) an, zu der das Video stoppen soll.
Inhalt-Tab des Video Pop Up-Blocks mit Quelloptionen, URL-Feldern und Einstellungen für Start-/Endzeit

Videooptionen:

  • Autoplay: Starten Sie das Video automatisch, wenn die Seite geladen wird.
  • Auf Mobilgeräten abspielen: Spielen Sie das Video auf Mobilgeräten inline ab, anstatt automatisch in den Vollbildmodus zu wechseln.
  • Stummschalten: Starten Sie das Video stummgeschaltet, um die Erfahrung des Besuchers nicht zu stören.
  • Schleife: Schleifen Sie das Video kontinuierlich, wenn es das Ende erreicht.
  • Player-Steuerelemente anzeigen: Zeigen Sie die Wiedergabesteuerelemente des Videoplayers an oder blenden Sie sie aus.
  • Datenschutzmodus: Wenn aktiviert, werden YouTube und Vimeo keine Besucherinformationen speichern, es sei denn, sie spielen das Video aktiv ab.
  • Lazy Load: Laden Sie das Video verzögert, bis es im Ansichtsfenster sichtbar wird, um die Ladegeschwindigkeit der Seite zu verbessern.
  • Intro-Titel / Intro-Porträt / Intro-Byline (nur Vimeo): Aktivieren Sie die Anzeige des Videotitels, des Autorenporträts und des Autoren-Bylines, die im Vimeo-Intro angezeigt werden.
  • Steuerelemente Farbe (nur Vimeo): Legen Sie die Farbe der Vimeo-Player-Steuerelemente fest.
  • Vorgeschlagene Videos (nur YouTube): Wählen Sie aus, was nach Ende des Videos angezeigt wird – Aktueller Video-Kanal (verwandte Videos vom selben Kanal) oder Beliebiges Video.
  • Download-Schaltfläche anzeigen (nur Benutzerdefiniert): Zeigt eine Download-Schaltfläche im benutzerdefinierten Videoplayer an.
  • Vorladen (nur Benutzerdefiniert): Legen Sie fest, wie das Video beim Laden der Seite geladen wird – Metadaten (lädt nur Videoinformationen), Automatisch (lädt das gesamte Video) oder Keine.
  • Vorschaubild: Legen Sie ein Vorschaubild fest, das angezeigt wird, bevor das Video abgespielt wird.
  • Sticky Video aktivieren: Wenn aktiviert, dockt der Videoplayer in einer Ecke des Bildschirms an, wenn Besucher an ihm vorbeiscrollen, und hält das Video während der gesamten Seite sichtbar.
Video Options-Bereich des Video Pop Up-Blocks mit Autoplay, Stummschaltung, Schleife, Datenschutzmodus und anderen Schaltern

Teaser-Video:

  • Teaser-Video aktivieren: Ersetzen Sie die statische Miniaturansicht durch ein kurzes, sich wiederholendes Teaser-Video, das stumm auf der Seite abgespielt wird. Wenn ein Besucher darauf klickt, wird das vollständige Video geöffnet. Hinweis: Die Aktivierung dieser Option deaktiviert die Bild-Overlay-Funktion.
  • Teaser-Video-Wiedergabe-Symbol: Wählen Sie das Symbol, das über dem Teaser-Video angezeigt wird, um anzuzeigen, dass es anklickbar ist.
  • Symbol-Schriftgröße: Legen Sie die Größe des Teaser-Wiedergabe-Symbols fest.
  • Banner anzeigen: Zeigt ein Banner über dem Teaser-Video an (z. B. eine Aufforderung „Zum Anhören von Audio klicken“). Konfigurieren Sie den Bannentext, die Hintergrundfarbe, die Textfarbe, die Typografie und das Symbol.

Bild-Overlay:

  • Bild-Overlay aktivieren: Ersetzen Sie die Standard-Video-Miniaturansicht durch ein benutzerdefiniertes Bild. Besucher klicken auf das Bild, um das Video zu öffnen. Hinweis: Die Aktivierung dieser Option deaktiviert die Teaser-Video-Funktion.
  • Bild auswählen: Wählen Sie ein Overlay-Bild aus Ihrer Medienbibliothek aus oder laden Sie es hoch.
  • Bildgröße: Legen Sie die Breite und Höhe des Overlay-Bildes in Pixel oder als Prozentsatz fest.
  • Wiedergabe-Symbol anzeigen: Schalten Sie das Wiedergabe-Symbol ein, das über dem Overlay-Bild erscheint.
  • Symbol-Schriftgröße: Legen Sie die Größe des Wiedergabe-Symbols fest, das auf dem Overlay-Bild angezeigt wird.
  • Symbol-Deckkraft: Legen Sie die Transparenz des Wiedergabe-Symbols fest (Skala 0–10).
  • Symbolfarbe: Legen Sie die Farbe des Wiedergabe-Symbols auf dem Overlay-Bild fest.
  • Lightbox aktivieren: Wenn aktiviert, öffnet das Klicken auf das Overlay-Bild das Video in einer Lightbox-Überlagerung, anstatt es inline abzuspielen.
Bild-Overlay-Bereich des Video Pop Up-Blocks mit Bildauswahl, Play-Symbol und Lightbox-Optionen

Schritt 3: Design anpassen

Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Video-Popup-Blocks anpassen.

Stile:

  • Breite: Legen Sie die Breite des Videoplayers als Prozentsatz seines Containers mit einem Schieberegler fest.
  • Seitenverhältnis: Wählen Sie das Seitenverhältnis des Videoplayers – 1:1, 3:2, 4:3, 9:16, 16:9 oder 21:9.
  • Ausrichtung: Legen Sie die horizontale Ausrichtung des Videoplayers fest – Links, Mitte oder Rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
  • Schatten: Wenden Sie einen Box-Schatten auf den Videoplayer an, indem Sie voreingestellte Größen verwenden – Keine, Haarlin, Klein, Mittel, Groß, X-Groß oder 2X-Groß.

Abstand:

  • Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
  • Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.

Attribute:

  • Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
  • CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
  • Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Schlüssel|Wert-Format ein.

Gerätesichtbarkeit:

  • Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
  • Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
  • Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.

Animationseffekte:

  • Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
  • Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Erweitert-Tab des Video Pop Up-Blocks mit Stilen für Breite, Seitenverhältnis, Ausrichtung und Schatteneinstellungen

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie mit der Konfiguration des Video-Popup-Blocks und der Anpassung seines Erscheinungsbilds fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit speichern.


Sie haben erfolgreich einen Video Pop Up-Block zu Ihrer Seite hinzugefügt! Mit Unterstützung für YouTube, Vimeo und selbst gehostete Videos sowie Bild-Overlays, Teaser-Vorschauen, Sticky Playback und Lightbox-Modi bietet Ihnen dieser Block alles, was Sie für ein überzeugendes Videoerlebnis benötigen. Experimentieren Sie mit den Wiedergabeoptionen und Overlay-Einstellungen, um die Kombination zu finden, die die Aufmerksamkeit Ihrer Besucher am besten fesselt.

Verwandte Artikel