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"

[Carschi23]

hallo, ich habe dawn und es nach anleitung gemacht aber irgendwo ist ein fehler, kann mir jemand helfen, bitte

[Carschi23]

irgendwie klappt es bei mir nicht, kannst du mir bitte helfen

[Gabe]

Hey @Carschi23 

Hast du das in der Zwischenzeit lösen können?

Welchen genauen Code hast du getestet?

VG,

[Carschi23]

 ich hab den Code einmal in der Sektion YouTube da in dieses neue CSS Fenster kopiert und einmal oben beim Header oder so und jedes Mal machte es für eine Sekunde beim laden den Anschein es klappt und dann ging sofort der Fehler auf

[Gabe]

@Carschi23 

Probiere es stattdessen mal hier im Benutzerdefiniertes Liquid Abschnitt:

[Carschi23]

cool, danke das hat geklappt.

ich hätte es gern über die ganze startseite wie bei diesem shop https://kleidermafia.com/

das kommt schon sehr cool so als kpl hintergrund

[Carschi23]

Und bei mir erscheint immer erst noch kurz so ein Play bzw pause Zeichen, wie kriegt man das weg?

[Gabe]

Hey @Carschi23 

Das ist theme-abhängig und ein Limit des gratis Dawn Themes leider. Hast du auch andere Themes getestet als nur das gratis Dawn theme? Wir empfehlen sehr auch manche der "profi-themes" zum Shop hinzufügen als Testumgebungen wie z. B. das Viola, Prestige, oder Impulse Theme.

Siehe z. B. wie sehr im Frame Theme Video effektiv sein kann wenn du in dieser Demo runterscrollst.

[Carschi23]

Achso na dann such ich Mal durch die themes. Und dann bezahle ich das einmalig wenn ich es zum veröffentlichen benutzen möchte? Kannst du mir sagen welches Themen ich brauche um das Video komplett im Hintergrund zu haben, ohne frames.

[Gabe]

Ja es gibt einige Themes die das können, wie z. B. das Frame oder das Motion Theme. Gehe in die Abschnitte und füge den Video Abschnitt hinzu der dann wie folgt aussieht und der Clou ist dass da MP4 hochladbar sein muss:

• Hier eine Anleitung von Archetype Themes. 
• Hier auch eine Anleitung vom Frame Theme.