Videos einbinden

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche


(YouTube-)Videos können in HTML-Quelltexten eingebunden und im Onlineshop abgespielt werden.

An folgenden Stellen kann man ein (YouTube-) Video hinterlegen:

  • In der Artikelverwaltung:
  • Im Shopeditor existieren drei Möglichkeiten:


Videos können sowohl über eine von e-vendo bereitgestellte Funktion (bei welcher das Video in einem separaten Reiter der Artikeldetailansicht ausgegeben wird) als auch über das Einbetten des Videos selbst mittels HTML im Shop bereitgestellt werden.

Die hier beschriebenen Vorgänge werden anhand von YouTube-Videos erläutert.


Einbindung über e-vendo

In diesem Abschnitt wird der genaue Ablauf zur Einbettung eines Videos über die von e-vendo zu Verfügung gestellten Funktionen beschrieben. In der Artikelverwaltung im Reiter Onlineshop im Unterreiter Download (Video, PDF, ZIP..) können Sie im Bearbeitungsmodus (YouTube-) Videos einbinden.

In diesem Reiter können Dokumente und Videos verschiedener Anbieter in einem dafür entsprechenden Reiter bereitgestellt werden. Die Videos werden im Standardlayout in separaten Reitern auf der Detailseite des Artikels dargestellt. Die zur Verfügung stehenden Reiter können in der Shop-Konfiguration definiert werden.

Artikelverw onlineshop download.png


Templ info-blk.png
Hier eingetragene YouTube-Videos werden datenschutzfreundlich hinterlegt. Das Video selbst hat also beim Abspielen die folgende URL:
https://www.youtube-nocookie.com/embed/[VideoID]

1. Nachdem Sie sich für ein entsprechendes Video entschieden haben, fügen Sie durch das Klicken auf Neu einen neuen Datensatz hinzu.

2. Es erscheint ein Dialog, in dem Sie den Anbieter auswählen, die ID des Videos und weitere Parameter festlegen. Bei der Einbindung von Videos aus Youtube oder Vimeo ist die VideoID nötig, nicht die URL des Videos.

Templ bsp-blk.png
Die vollständige URL eines Youtube-Videos sieht wie folgt aus: https://www.youtube.com/watch?v=7dJ1KljRIeE

Die einzutragende ID ist hierbei der Bereich nach dem v= - in diesem Fall also 7dJ1KljRIeE

Bei Vimeo sieht eine Video-URL wie folgt aus: https://vimeo.com/95978319

Die einzutragende ID ist hier der Bereich nach dem /, also 95978319

3. Empfehlenswert ist das Format 16:9, da die meisten Videos in diesem Seitenformat hochgeladen werden.

4. Sie haben in diesem Dialog noch die Möglichkeit, eine Bezeichnung und eine Information für den einzelnen Shop oder auch für die Multishops zu vergeben. Unter dem Unterreiter Zusätzliche Angaben können Sie noch festlegen, in welchem Shop das Video angezeigt werden soll.

5. Mit dem Betätigen auf OK und anschließend auf Speichern wird das Video im gewählten Reiter auf der Artikeldetailseite im Shop angezeigt.


Ergebnis

Das Video wird im Onlineshop in der Artikeldetailansicht im Reiter Video gezeigt und mit betätigen auf das Play-Symbol abgespielt.

Videos shopanzeige-01.png


Einbindung über Einbettungscode

Wenn das Video nicht in einem separaten Reiter in der Artikeldetailansicht dargestellt werden soll, sondern in einem beliebigen HTML-Text, kann auch dessen Einbettungscode in den HTML-Texten abgelegt werden.

Der Vorgang wird hier genauer anhand eines YouTube-Videos beschrieben:

1. Wenn Sie ein entsprechendes Video gefunden haben, befindet sich unter diesem die Schaltfläche Teilen bzw. Share.

Videos embed-01.png


2. Wenn Sie die Teilen-Schaltfläche betätigen, öffnet sich das unten angezeigte Fenster mit Anbindungen zu SocialMedia-Webseiten. Hier können Sie bei Bedarf auch einen Startzeitpunkt für das Video wählen.

Videos embed-02.png


3. Nach dem Betätigen der Schaltfläche Einbetten bzw. Embed vergrößert sich das Fenster und sie erhalten einen langen HTML-Text. Diesen können Sie mittels kopieren bzw. copy kopieren. Hier können Sie noch entscheiden, ob die Steuerelemente des Video-Players dargestellt und der erweiterte Datenschutzmodus aktiviert werden soll (Häkchen setzen um datenschutzfreundliche Videos abzuspielen). Auch hier können Sie den Startzeitpunkt auswählen.

Videos embed-03.png


4. Den kopierten HTML-Text können Sie nun in folgende HTML-Quelltexten einfügen:

  • In der Artikelverwaltung:
  • Im Shopeditor existieren drei Möglichkeiten:


Ergebnis

Beispiel 1: Das Video ist nicht wie gewohnt in einem neuem Reiter zu sehen, sondern in der Artikeldetailansicht in der Produktbeschreibung.

Videos shopanzeige-02.png


Beispiel 2: Das Video wurde im Shopeditor im Reiter Seitentext im Untereiter Thementext eingebettet.

Videos shopanzeige-03.png
zum Anfang der Seite