Video

Verwenden Sie den Inhaltstyp Video, um ein Video, das auf YouTube oder Vimeo gehostet wird, dem Page Builder Arbeitsbereich hinzuzufügen. Es ist einfach, ein Video in eine Seite oder einen Block sowie in Produkt- und Kategoriebeschreibungen einzubetten.

Video auf der Frontend-Startseite

Wenn Sie im Arbeitsbereich Page Builder arbeiten, werden Ihre Inhaltsänderungen erst dann vollständig gespeichert, wenn Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs klicken und dann auf Speichern in der oberen rechten Ecke für die CMS-Seite, die Produktseite, die Kategorieseite, den Block oder den dynamischen Block.

Wenn Sie umfangreiche Änderungen am Inhalt von Page Builder vornehmen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abläuft.

Video-Toolbox

Video toolbox

Werkzeug Symbol Beschreibung
Bewegen Move icon Verschiebt das Video an eine andere Position auf dem Arbeitsbereich.
(Label) Video Identifiziert den aktuellen Inhaltscontainer als Video. Bewegen Sie den Mauszeiger über den Bildcontainer, um die Toolbox zu sehen.
Einstellungen Einstellungssymbol Öffnet die Seite Video bearbeiten, wo Sie die Eigenschaften des Videos und des Containers ändern können.
Ausblenden Symbol ausblenden Blendet das aktuelle Video aus.
Anzeigen Symbol anzeigen Zeigt das versteckte Video.
Duplizieren Doppeltes Symbol Erzeugt eine Kopie des Videos.
Entfernen Symbol entfernen Löscht das Video auf dem Arbeitsbereich.

Hinzufügen eines Videos

  1. Bevor Sie beginnen, navigieren Sie zu dem YouTube oder Vimeo Video, das Sie einbetten möchten, und kopieren Sie den Link.

    Alternativ können Sie auch einen direkten Link zu einer gültigen Videodatei kopieren. Siehe Grundlegende Videoeinstellungen für gültige Links.

  2. Kehren Sie in Commerce Admin zu dem Arbeitsbereich Page Builder zurück, in dem Sie das Video hinzufügen möchten.

  3. Erweitern Sie im Bereich Page Builder Medien und ziehen Sie einen Platzhalter Video auf den Arbeitsbereich.

    Ziehen eines Video-Platzhalters auf den Arbeitsbereich

  4. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

  5. Fügen Sie unter Video-URL die URL des kopierten Videos ein.

    Die URL des Videos Page Builder, das in diesem Beispiel verwendet wird, lautet: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Um die Maximale Breite des Videos zu begrenzen, geben Sie die maximale Breite in Pixel ein.

    Wenn keine Angabe gemacht wird, ist das Video so breit, wie es der Container zulässt, abzüglich der Ränder und der Füllung.

  7. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Videoeinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Videocontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().

  2. Ändern Sie die Einstellungen wie folgt sections:

  3. Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Grundlegende Videoeinstellungen

  1. Um das aktuelle Video zu ändern, aktualisieren Sie die Video-URL.

    Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links zu sein:

    • YouTube-Videos: https://youtu.be/CoDhMRUUjeI
    • Vimeo-Videos: https://vimeo.com/190156113
    • Gültige Videodateien (wir empfehlen .mp4): https://myvideos.com/spiral.mp4
  2. Um die zulässige Breite für das Video im Frontend zu ändern, geben Sie die neue Maximale Breite in Pixel ein.

    Wenn keine Angabe gemacht wird, erstreckt sich das Video über die gesamte Breite des Containers, abzüglich der Ränder und der Füllung.

  3. Um das Video automatisch zu starten, nachdem die Seite geladen wurde, setzen Sie Autoplay auf Ja.

    Wenn Autoplay auf Ja eingestellt ist, wird das Video bei der Wiedergabe gemäß den Richtlinien stummgeschaltet. Aber auch mit dieser Einstellung werden Ihre Videos auf mobilen Geräten nicht automatisch abgespielt. Weitere Informationen zu diesen Richtlinien finden Sie in den folgenden Entwicklerressourcen:

    Wenn Autoplay auf Nein eingestellt ist, wird das Video nur auf Anforderung des Benutzers abgespielt.

Erweitert

  1. Wählen Sie eine Ausrichtung, um die horizontale Positionierung des Videos innerhalb des Containers zu steuern.

    Standard Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
    Links Richtet den Inhalt entlang des linken Randes des Videocontainers aus, unter Berücksichtigung der angegebenen Polsterung.
    Zentriert Richtet den Inhalt in der Mitte des Videocontainers aus, unter Berücksichtigung der angegebenen Füllung.
    Rechts Richtet den Inhalt entlang des rechten Randes des Videocontainers aus, unter Berücksichtigung der angegebenen Füllung.
  • Legen Sie den Stil Rahmen fest, der auf alle vier Seiten des Videocontainers angewendet wird:

    Standard Wendet den Standard-Rahmenstil an, der in der zugehörigen Stilvorlage angegeben ist.
    Keiner Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
    Gepunktet Der Containerrand erscheint als gepunktete Linie.
    Gestrichelt Der Containerrand erscheint als gestrichelte Linie.
    Durchgehend Der Containerrand wird als durchgezogene Linie dargestellt.
    Doppelt Der Containerrand wird als Doppellinie dargestellt.
    Rille Der Containerrand erscheint als gerillte Linie.
    Steg Der Containerrand erscheint als geriffelte Linie.
    Einzug Die Umrandung des Containers erscheint als versenkte Linie.
    Außenlinie Der Containerrand erscheint als Umrandungslinie.
  • Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

    • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

      Rahmenfarbe

    • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

    • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

  • (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf den Videocontainer angewendet werden sollen.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  • Geben Sie Werte in Pixel für Ränder und Auffüllung ein, um die äußeren Ränder und die innere Auffüllung des Video-Containers festzulegen.

    Geben Sie die entsprechenden Werte in das Diagramm des Videocontainers ein.

    Ränder Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird.
    Auffüllung Die Menge an Leerraum, die auf den inneren Rand aller Seiten des Containers angewendet wird.

Ein Video verschieben

  1. Bewegen Sie den Mauszeiger über den Videocontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Move ().

    Video verschieben

  2. Wählen Sie das Video aus und ziehen Sie es an die neue Position, direkt unter die rote Hilfslinie.

    Verwendung der roten Hilfslinie zum Platzieren des Videos

Ein Video vom Arbeitsbereich entfernen

  1. Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Entfernen ().

  2. Wenn Sie zur Bestätigung aufgefordert werden, klicken Sie auf OK.