Mit dem Video-Popup-Block können Sie Videoinhalte von YouTube, Vimeo oder einer selbst gehosteten Quelle in jede SeedProd-Seite einbetten. Im Gegensatz zu einem standardmäßigen eingebetteten Player unterstützt der Block einen Lightbox-Modus, ein Sticky-Video, das den Besuchern beim Scrollen folgt, und eine Bildüberlagerung, die als benutzerdefinierte Miniaturansicht fungiert – so haben Sie die volle Kontrolle darüber, wie Besucher Ihr Video entdecken und mit ihm interagieren.
Ganz gleich, ob Sie eine Produktdemo, ein Testimonial oder ein Erklärvideo präsentieren möchten – der Video-Popup-Block bietet Ihnen erweiterte Wiedergabeoptionen, darunter Autoplay, Stummschaltung, Loop, Datenschutzmodus und eine Teaser-Video-Funktion. So können Sie das Seherlebnis ganz auf Ihre Seitenziele und die Vorlieben Ihres Publikums abstimmen.
Hinzufügen des Video-Popup-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Video-Popup-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Video-Popup“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Video-Popup-Block, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ sind die Einstellungen in vier Abschnitte unterteilt.
Video:
- Quelle: Wählen Sie Ihre Videoquelle aus – 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: Für Sticky Video ist ein Vimeo-Konto der Typen Starter, Standard, Advanced, Plus, Pro, Business, Premium oder Enterprise erforderlich.
- Externe URL / Benutzerdefinierte Video-URL (nur benutzerdefiniert): Schalten Sie die externe URL um, um eine Verknüpfung zu einer gehosteten Videodatei herzustellen, oder geben Sie die direkte URL zu Ihrem Video ein. Sie können auch „Benutzerdefiniertes Video auswählen“ verwenden, um eine Datei aus Ihrer Medienbibliothek auszuwählen.
- Startzeit: Geben Sie eine Zeit (in Sekunden) an, zu der die Wiedergabe des Videos beginnen soll.
- Endzeit: Geben Sie eine Zeit (in Sekunden) an, zu der die Wiedergabe des Videos beendet werden soll.
Videooptionen:
- Autoplay: Das Video wird automatisch gestartet, wenn die Seite geladen wird.
- Auf Mobilgeräten abspielen: Das Video wird auf Mobilgeräten inline abgespielt, anstatt automatisch in den Vollbildmodus zu wechseln.
- Stummschalten: Starten Sie das Video stummgeschaltet, um das Erlebnis der Besucher nicht zu stören.
- Loop: Das Video wird nach Erreichen des Endes kontinuierlich wiederholt.
- Wiedergabesteuerung anzeigen: Zeigen Sie die Wiedergabesteuerung des Videoplayers an oder blenden Sie sie aus.
- Datenschutzmodus: Wenn diese Option aktiviert ist, speichern YouTube und Vimeo keine Besucherinformationen, es sei denn, die Besucher spielen das Video aktiv ab.
- Lazy Load: Das Laden des Videos wird verzögert, bis es im Ansichtsfenster sichtbar wird, um die Ladegeschwindigkeit der Seite zu verbessern.
- Intro-Titel / Intro-Porträt / Intro-Byline (nur Vimeo): Schalten Sie die Anzeige des Videotitels, des Autorenporträts und der Autoren-Byline im Vimeo-Intro ein oder aus.
- Steuerelemente Farbe (nur Vimeo): Legen Sie die Farbe der Steuerelemente des Vimeo-Players fest.
- Vorgeschlagene Videos (nur YouTube): Wählen Sie aus, was nach dem Ende des Videos angezeigt werden soll – Aktueller Videokanal (ähnliche Videos aus demselben Kanal) oder Beliebiges Video.
- Download-Button anzeigen (nur benutzerdefiniert): Zeigt einen Download-Button auf dem 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.
- Poster: Legen Sie ein Posterbild fest, das vor dem Abspielen des Videos angezeigt wird.
- Sticky Video aktivieren: Wenn diese Option aktiviert ist, wird der Videoplayer an einer Ecke des Bildschirms angedockt, wenn Besucher daran vorbeiscrollen, sodass das Video auf der gesamten Seite sichtbar bleibt.
Teaser-Video:
- Teaser-Video aktivieren: Ersetzen Sie das statische Miniaturbild durch ein kurzes Teaser-Video, das ohne Ton auf der Seite abgespielt wird. Wenn ein Besucher darauf klickt, wird das vollständige Video geöffnet. Hinweis: Durch Aktivieren dieser Option wird die Funktion „Bildüberlagerung“ deaktiviert.
- Teaser-Video-Wiedergabe-Symbol: Wählen Sie das Symbol, das über dem Teaser-Video angezeigt wird, um anzuzeigen, dass es anklickbar ist.
- Symbolschriftgröße: Legen Sie die Größe des Teaser-Wiedergabesymbols fest.
- Banner anzeigen: Zeigen Sie ein Banner über dem Teaser-Video an (z. B. eine Aufforderung „Zum Anhören bitte anklicken“). Konfigurieren Sie den Bannertext, die Hintergrundfarbe, die Textfarbe, die Schriftart und das Symbol.
Bildüberlagerung:
- Bildüberlagerung aktivieren: Ersetzen Sie die Standard-Videominiaturansicht durch ein benutzerdefiniertes Bild. Besucher klicken auf das Bild, um das Video zu öffnen. Hinweis: Durch Aktivieren dieser Option wird die Teaser-Video-Funktion deaktiviert.
- Bild auswählen: Wählen Sie das Overlay-Bild aus Ihrer Medienbibliothek aus oder laden Sie es hoch.
- Bildgröße: Legen Sie die Breite und Höhe des Overlay-Bildes in Pixeln oder als Prozentsatz fest.
- Wiedergabe-Symbol anzeigen: Schalten Sie das Wiedergabe-Symbol ein, das über dem Overlay-Bild angezeigt wird.
- Symbolschriftgröße: Legen Sie die Größe des Wiedergabesymbols fest, das auf dem Overlay-Bild angezeigt wird.
- Icon Opacity: Legt die Transparenz des Wiedergabesymbols fest (Skala von 0 bis 10).
- Symbolfarbe: Legen Sie die Farbe des Wiedergabesymbols auf dem Overlay-Bild fest.
- Lightbox aktivieren: Wenn diese Option aktiviert ist, wird das Video durch Klicken auf das Overlay-Bild in einem Lightbox-Overlay geöffnet, anstatt es inline abzuspielen.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Video-Popup-Blocks anpassen.
Stile:
- Breite: Stellen Sie die Breite des Videoplayers mithilfe eines Schiebereglers als Prozentsatz seines Containers ein.
- 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, mittig oder rechts – mit gerätespezifischen Steuerelementen für Desktop-PCs, Tablets und Mobilgeräte.
- Schatten: Wenden Sie einen Kastenschatten auf den Videoplayer an, indem Sie voreingestellte Größen verwenden – Keine, Haarlinie, Klein, Mittel, Groß, X Groß oder 2X Groß.
Abstand:
- Rand: Legen Sie den äußeren Abstand um den Block herum auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Abstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers an allen vier Seiten fest, mit gerätespezifischen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen hinzu, um ein gezieltes Styling zu erzielen.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese ID 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 Format Schlüssel|Wert ein.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Umschalten, um den Block bei der Anzeige auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block bei der Anzeige auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Schalten Sie diese Option ein, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scroll-Effekt: Wende eine scroll-gesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Viewport-Offset.
- Mouse Effect: Wende einen durch Mausbewegungen gesteuerten Parallax-Effekt auf den Block an.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Video-Popup-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Video-Popup-Block zu Ihrer Seite hinzugefügt! Mit Unterstützung für YouTube, Vimeo und selbst gehostete Videos sowie Bildüberlagerungen, Teaser-Vorschauen, Sticky-Wiedergabe und Lightbox-Modi bietet Ihnen dieser Block alles, was Sie für ein überzeugendes Videoerlebnis benötigen. Experimentieren Sie mit den Wiedergabeoptionen und Überlagerungseinstellungen, um die Kombination zu finden, die die Aufmerksamkeit Ihrer Besucher am besten auf sich zieht.