Autoplay Video Frontpage

[Johannes6]

Moin...

ich möchte gern 2 Videos auf meiner Frontpage einbinden und die auf Autoplay laufen lassen, sodass niemand erst auf irgend ein Playzeichen klicken muss. Ich benutze das "Ride" Theme.

Muss ich hierfür einen HTML Code umschreiben? Oder jemanden beauftragen der das machen kann?

Geht das überhaupt mit meinem Theme?

Für Hilfe wäre ich sehr Dankbar :-). 

[Gabe · Accepted solution]

Hey @Johannes6 

Danke für die Frage und du möchtest einen Video auf der HP loopen lassen, ist das richtig? Video Inhalte sind ein guter Weg deine Conversions zu erhöhen denn wir wissen, dass die Besucher zu Online Shops das etwas besondere erleben wollen und Video ist ein super Weg das zu erzielen. Besucher wollen oft die Produkte in Action sehen sowie etwas mehr über das Shop erfahren, wie z. B. sehen wie Produkte in der Werkstatt gebaut werden. So ein Video würde Vertrauen aufbauen was zu mehr Verkäufe führt.

Die folgenden Tipps gelten für das Dawn Theme (praktisch die gleiche Code-Struktur wie unser Ride Theme) und du musst das halt testen ob es bei dir funzt oder nicht. Wenn nicht dann ggf. einen Code Experten konsultieren.

Das erste was du machst ist deine 2 Video MP4 Dateien zum Dateienbereich hochladen, oder zu einem anderen Cloud System wie Dropbox oder Google Drive wo du Share-Links erzeugen kannst. Unser internes Dateien Bereich in deinen Shopify Einstellungen ist teil des CDN Network und somit wahrscheinlich das schnellste beim Reproduzieren des Videos.

Dann in einem Custom Liquid Abschnitt auf der HP wie folgt den folgenden Code eintragen pro Video (entweder jeder Video einen eigenen Abschnitt oder beide Codes doppelt und untereinander im rechten Kästchen und speichern - wie ich hier in Dawn demonstriere):

Der Code (bitte MP4 Video-Link mit deinem eigenen ersetzen):

<style>
video {
  display: block;
  margin: 0 auto;
  width: 50%;
}

@media screen and (max-width: 800px) {
  video {
    width: 90%;
    }
  }
</style>

<video controls autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/s/files/1/0550/0960/7817/files/video_1.mp4?v=1646563222" />
</video>

Das hat in meinem Dawn ganz gut gefunzt also denke ich wird das auch bei dir funzen. Wenn dir der Video zu schmal ist dann ändere einfach die "50%" im obigen Code zu 80% oder 100% (vollbreite).

Lass auch wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!

Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community. Du musst in der Benachrichtigungs-E-Mail auf „Antworten“ tippen oder klicken, um eine neue Nachricht zu verfassen. Schreibe in dieser Nachricht deine Antwort und klicke oder tippe dann auf „Senden“, um deine Antwort in der Community zu posten.

Unsere Community unterstützt es nicht, direkt auf eine Benachrichtigungs-E-Mail zu antworten, weshalb deine Antwort in dieser E-Mail nicht in der Community veröffentlicht werden könnte und wir sie nicht sehen, was schade wäre.

Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

• https://forms.gle/SSVUmn5vXLYYW9Dh8

[Johannes6]

Wuhu...

ich habe mir Tage lang den Kopf zerbrochen und mich bei YouTube und Vimeo ausprobiert, doch so wie du es erklärt hast, hat es bei meinem Theme "Ride" sehr gut funktioniert 😍. Ich kann die Größe jetzt ganz easy verändern und den Ton anlassen standard mäßig oder auslassen standard mäßig 😍. Vielen Dank für diese hilfreiche Information.

[dpparfum_Jonas]

Wie erhalte ich eigentlich diesen Link aus Shopify? Unter Uploads und dann steht der Link oben in der Taskleiste?

[Gabe]

@dpparfum_Jonas 

Welchen Link? Den CDN Link?

[dpparfum_Jonas]

Genau. Habe den bereits gefunden. Ist unter "Medien"