Produktvideo direkt auf Produktseite abspielen

[FirstUser2023]

Hallo Freunde,

ich habe eine Frage zum Produktvideo. Und zwar spielen sich die Produktvideos auf der mobilen Version auf einer separaten Seite ab, anstatt auf der Produktseite direkt. Ich setze mal ein Foto bei. Ich hätte gern, dass sich die Videos abspielen, ohne dass die Produktseite verlassen wird.

 

Wenn das nicht möglich ist, muss das Video zumindest mittig auf dem Display zu sehen sein, momentan ist es eher zu weit unten angesetzt.

Ich hoffe dass ihr mehr wisst und mir helfen könnt,

Viele Grüße und Danke!

[Gabe]

Hey @FirstUser2023 

Danke für das Bild und in den Shopify Themes werden die Videos zentriert in einem Lightbox Popup gespielt. Das sieht man am kleinen "X" oben rechts in deinem bild und das kann man nicht aendern. Ich bin in meine V.10.0 Shopify Themes gegangen und sah dass es keine Einstellung diesbzgl. im Mobile Modus gibt und das kann man nur mit eine komplexen Coding Lösung aendern was deine Theme aus den Updates ausschließen könnte. Ich habe in unserem Design Forum auch keine Threads zu diesem Thema gefunden aber du kannst deine Frage gerne hier posten.

Hast du vielleicht ein drittanbieter Test-Theme in deinem Shop? Wenn ja, gehe in den Theme Editor dieses Themes und siehe dir den Video im Mobile Modus dieses Produkts an. Da wirst du sehen, dass der Video direkt auf Mobile abspielt anstatt in einem Lightbox. 

Das DIY oder mit einem Experten machen

Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Im Theme CSS Editor wird es wahrscheinlich nicht klappen aber "probieren geht über studieren" wie man so schoen sagt. 

Gehe in die Theme Code Datei product-template.liquid oder product.liquid aus dem linken Seitenmenü. Suche den Abschnitt, in dem das Produktbild codiert ist. Es kann so etwas wie {% for image in product.images %} enthalten. An dieser Stelle kann man einen einen HTML5-Videoplayer-Code einfügen. Zum Beispiel:

<video width="320" height="240" controls>
  <source src="URL DES VIDEOS" type="video/mp4">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Ersetze "URL DES VIDEOS" durch die tatsächliche URL des Videos. Stelle sicher, dass der Video im .mp4-Format ist und speichere.

Aber meine Empfehlung - davon die Hände weg zu lassen!

[FirstUser2023]

Hallo Gabe, ich habe die Sache mal wie du empfohlen hast an einen Experten weitergegeben, das Risiko da etwas verkehrt zu machen ist mir dann doch zu hoch, zumal ich den Eintrag in meinem Theme nichtmal gefunden habe.

Ich danke dir für den Hinweis viele Grüße!

[Gabe]

Hey @FirstUser2023 

Super, das ist ein good move. Darf ich im grossen und ganzen wissen, welcher Entwickler, nur so das ich weiß?

VG,