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






Video hinzufügen
-
Bevor Sie beginnen, navigieren Sie zum YouTube- oder Vimeo-Video, das Sie einbetten möchten, und kopieren Sie den Link.
Alternativ können Sie auch einen direkten Link in eine gültige Videodatei kopieren. Gültige finden Sie unter " Videoeinstellungen“.
-
Kehren Sie in der Commerce Admin zu dem Arbeitsbereich Page Builder zurück, in dem Sie das Video hinzufügen möchten.
-
Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Video Platzhalter auf das Bühnenbild.
-
Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen
-
Fügen Sie Video URL die URL des kopierten Videos ein.
Die URL des in diesem Beispiel verwendeten Page Builder-Videos lautet:
https://www.youtube.com/watch?v=Y0KNS7C5dZA
. -
Um die Maximum Width des Videos zu begrenzen, geben Sie die maximale Breite in Pixel ein.
Wenn es leer ist, wird das Video so breit wie vom Container erlaubt, wobei Ränder und Abstände berücksichtigt werden.
-
Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
Videoeinstellungen ändern
-
Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen
-
Ändern Sie die Einstellungen gemäß den folgenden Abschnitten:
-
Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
Grundlegende Videoeinstellungen
-
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 sein zu:
- Videos zu YouTube:
https://youtu.be/CoDhMRUUjeI
- Videos zu Vimeo:
https://vimeo.com/190156113
- Gültige Videodateien (
.mp4
wird empfohlen):https://myvideos.com/spiral.mp4
- Videos zu YouTube:
-
Um die zulässige Breite für das Video in der Storefront zu ändern, geben Sie die neue Maximum Width in Pixel ein.
Wenn dieses Feld leer ist, erweitert das Video die gesamte Breite des Containers, wobei Ränder und Abstände weniger berücksichtigt werden.
-
Um das Video nach dem Laden der Seite automatisch zu starten, setzen Sie Autoplay auf
Yes
.Wenn die automatische Wiedergabe auf
Yes
festgelegt ist, wird das Video bei der Wiedergabe gemäß Richtlinie stummgeschaltet. Aber auch mit dieser Einstellung können Mobilgeräte Ihre Videos nicht automatisch abspielen. Weitere Informationen zu diesen Richtlinien finden Sie in den folgenden Entwicklerressourcen:- Autoplay-Richtlinie von Vimeo
- Richtlinie zur automatischen Wiedergabe aus Google (Chrome/YouTube)
- Richtlinie zur automatischen Wiedergabe für lokale Videos
Wenn die automatische Wiedergabe auf
No
eingestellt ist, wird das Video nur auf Benutzerwunsch wiedergegeben.
Advanced
-
Um die horizontale Positionierung des Videos innerhalb des Containers zu steuern, wählen Sie eine Alignment aus:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Beschreibung Default
Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist. Left
Richtet den Inhalt am linken Rand des Video-Containers aus, wobei ein etwaiger Abstand berücksichtigt wird. Center
Richtet den Inhalt in der Mitte des Video-Containers aus, wobei der angegebene Abstand berücksichtigt wird. Right
Richtet den Inhalt am rechten Rand des Video-Containers aus, wobei ein etwaiger Abstand berücksichtigt wird.
-
Legen Sie den Border fest, der auf alle vier Seiten des Video-Containers angewendet wird:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Beschreibung Default
Wendet die Standardformatvorlage für Rahmen an, die im zugehörigen Stylesheet angegeben ist. None
Zeigt keine sichtbaren Begrenzungen des Containers an. Dotted
Der Container-Rahmen wird als gepunktete Linie angezeigt. Dashed
Der Container-Rahmen wird als gestrichelte Linie angezeigt. Solid
Der Container-Rahmen wird als durchgezogene Linie angezeigt. Double
Der Container-Rahmen wird als doppelte Linie angezeigt. Groove
Der Container-Rahmen wird als gerillte Linie angezeigt. Ridge
Der Container-Rahmen wird als geriffelte Linie angezeigt. Inset
Der Container-Rahmen wird als Einfügelinie angezeigt. Outset
Der Container-Rahmen wird als Ausgangslinie angezeigt. -
Wenn Sie einen anderen Rahmenstil als
None
festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Border Color Geben Sie die Farbe an, indem Sie einen Musterabschnitt auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Border Width Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein. Border Radius Geben Sie die Anzahl der Pixel ein, um die Größe des Radius festzulegen, mit dem jede Ecke des Rahmens gerundet werden soll. -
(Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf den Video-Container angewendet werden sollen.
Trennen Sie mehrere Klassennamen durch ein Leerzeichen.
-
Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Video-Containers anzugeben.
Geben Sie jeden entsprechenden Wert im Video-Container-Diagramm ein.
table 0-row-2 1-row-2 2-row-2 layout-auto Container-Bereich Beschreibung Margins Die Menge des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird. Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird.
Video verschieben
-
Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol „Verschieben (
-
Wählen Sie das Video aus und ziehen Sie es an die neue Position, direkt unter der roten Richtlinie.
Entfernen eines Videos aus der Bühne
-
Bewegen Sie den Mauszeiger über den Video-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol „Entfernen (
-
Wenn Sie zum Bestätigen aufgefordert werden, klicken Sie auf OK.