Ein Video oder einen Youtube-Clip einbetten - Textalk Abicart
Ich habe einen Videoclip, kann ich ihn in das Dateiarchiv hochladen?
Ja, Sie können das Video in das Dateiarchiv hochladen, aber Sie sollten für Ihre Videos immer einen Streaming-Dienst wie YouTube, Vimeo oder ähnliches nutzen. Wenn Sie etwas z.B. mit Ihrem Handy gefilmt haben und die Videodatei direkt auf die Website hochladen, müssen die Besucher die gesamte Videodatei herunterladen, bevor sie den Clip ansehen können. Das kann dazu führen, dass der gesamte Shop sehr träge und langsam geladen wird. Daher sollten Sie das Video immer z. B. auf YouTube hochladen und den Clip dann von dort aus auf Ihrer Website "einbetten".
Wichtig zu beachten
Die Themes von Abicart sind responsive, d.h. das Design passt sich den Bildschirmgrößen der Besucher an. Wenn Sie einen Einbettungscode von einem Streaming-Dienst kopieren, enthält der Code normalerweise eine feste Breite und Höhe, was bedeutet, dass der Videoclip nicht responsiv ist. Wir gehen weiter unten auf dieser Seite darauf ein, wie man den Clip responsive macht.
Einbetten eines Links von YouTube
- Wenn Sie ein Video auf YouTube hochgeladen haben, klicken Sie auf "Teilen" unterhalb des Videos
- Klicken Sie dann auf "Einbetten" und kopieren Sie den Code
- Sie fügen den Link in die Artikelbeschreibung des Artikels ein, in dem das Video erscheinen soll.
- Gehen Sie zu Produkte -> wählen Sie ein Produkt aus, bearbeiten Sie es und fügen Sie den Code in "Beschreibung" ein. Speichern.
Ein Video responsiv und in voller Breite darstellen
Ein im Thema eingebettetes Video passt sich nicht automatisch an die Bildschirmgröße des Besuchers an.
Lösung: Gehen Sie zu https://embedresponsively.com/ und fügen Sie den Link von YouTube oder Vimeo ein und klicken Sie auf "Einbetten". HINWEIS! Beachten Sie, dass es sich um die URL handelt, die Sie aus der Adressleiste kopieren, und nicht um den Freigabelink.
Der angezeigte Code besteht aus einem CSS-Teil und einem HTML-Teil, die Sie an zwei verschiedenen Stellen einfügen müssen. Den Code zwischen den "Style-Tags" fügen Sie in Ihr Stylesheet im Thema ein und den HTML-Code nach den Style-Tags (im Bild hervorgehoben) fügen Sie in den Quellcode in einem separaten HTML-Modul ein.
Sie können das Video auch auf einer Produktseite einfügen:
Produkte -> Produkt auswählen, bearbeiten -> den Code "Beschreibung" einfügen.
Beispiel:
Einen Link von YouTube-Shorts einbetten
Wenn das Video, das Sie einbetten möchten, ein "Kurzfilm"-Video ist, müssen Sie die URL bearbeiten, die Sie von YouTube erhalten.
Der Link, den Sie erhalten, sieht wie folgt aus: https://youtube.com/shorts/exempelvideo
Er muss so bearbeitet werden, dass er wie folgt aussieht: https://youtube.com/embed/exempelvideo
Kopieren Sie den nachstehenden Code und fügen Sie ihn in Ihren Editor ein, und ersetzen Sie dann diese Felder:
- Video-URL
- Die optimale Größe für ein Shorts-Video ist 315px x 560px, aber Sie können die Bildgröße nach Bedarf ändern. Achten Sie darauf, dass das Seitenverhältnis beibehalten wird.
- Rahmenrand in Pixel (px)
<iframe width="315" height="560"
src="https://www.youtube.com/embed/exempelURL"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
Folgen Sie diesen Schritten:
1. Öffnen Sie das Video auf Youtube
2. Kopieren Sie den Videolink, den Sie in der Adressleiste Ihres Browsers finden.
(oder) Klicken Sie auf Teilen > Kopieren.
4. fügen Sie den kopierten Videolink in den oben erwähnten iFrame-Code ein.
5. Ersetzen Sie /shorts/ durch /embed/ in der Video-URL:
Vorher: https://youtube.com/shorts/exempelvideo
Nachher: https://youtube.com/embed/exempelvideo
6. Ändern Sie die Breite/Höhe, wenn sie angepasst werden muss.
Der Code sollte jetzt zum Beispiel so aussehen:
<iframe width="315" height="560"
src="https://youtube.com/embed/uE9S4UiINEc?si=0Sbx8nxSh7hAOcVc"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
5) Fügen Sie den Code in den Quellcode (<>) eines beliebigen HTML-Blocks ein.
Dabei kann es sich zum Beispiel um eine Produktbeschreibung, eine separate Seite, eine Produktgruppe oder die Startseite handeln.
Wenn Sie den Code in den Shop einfügen, wird das Video wie folgt angezeigt: