Verwendung von Hochkant Videos als Produktimage/Asset nicht User-Freundlich

[HenryAuffahrt]

Hallo zusammen,

wir versuchen gerade Hochkant Videos, als Produktvideos zu verwenden. Dabei stößt uns ein Thema negativ auf: Wenn man auf Play klickt, wird das Video immer sehr klein dargestellt auf den gängigen Smartphones. Man muss dann erst extra auf Vollbild klicken. Insgesamt benötigt der User damit drei Klicks, bis er zum gewünschten Ergebnis kommt.

Unser Wunsch wäre: 1x Klick, und zwar auf Play und das Video startet.

Damit ihr das ganze einmal nachstellen könnt, habe ich hier ein Testprodukt angelegt, öffnet dieses Produkt einmal auf eurem Smartphone und geht die folgenden Schritte durch:

1. Swipe zu dem letzten Video im Produkt Nicht kaufen Produkt. (Das Video mit den Bienen und Blüten)
   
2. Klicke auf Play 
   
3. Das Video öffnet sich, allerdings sehr klein und rechts und links ist ein Schwarzer Bereich.
   
4. Klicke jetzt auf den Vollbildmodus, erst jetzt öffnet sich das Bild so wie man es bereits am Anfang erwartet hätte.

Ich hoffe ihr könnt das Ganze nachvollziehen. Wir möchten eine bessere User Experience im Shopify Shop erreichen. Das ein User nun dreimal klicken muss, bis er das Video sehen kann, ist nicht mehr zeitgemäß. Die meisten Webseitenbesucher nutzen das Smartphone zum surfen, angesichts dessen hat bei unserer Webseite ein Hochkant Video auch Priorität.

Ihr seht bei dem Testprodukt auch ein Video von Unge. Dabei handelt es sich um ein Youtube Video welches verknüpft wurde. Hier sieht man das Verhalt ganz anders, bereits in der Vorschau wird es als Querformat Video angezeigt. Das schlimmste allerdings, beim Abspielen gibt uns der Youtube Player nicht die Möglichkeit es im Vollformat anzuzeigen.

Demnach ist das Hochladen von Videos direkt in Shopify schon einmal die bessere Variante, allerdings immer noch nicht zufriedenstellend aus den oben genannten Gründen.

Ich würde mich freuen, ob mir jemand zeigen kann, wie er oder sie es in Ihrem Shop gelöst hat. Evtl. könnte dies vom Shopify Staff auch als Verbesserungsvorschlag aufgenommen werden.

Vielen Dank bereits im Voraus.

Mit besten Grüßen

Henry

[Finer]

@HenryAuffahrt habt Ihr einen vergleichbaren Test mit Vimeo durchgeführt? Ihr könnt vielleicht folgendes Video als Grundlage nutzen: https://vimeo.com/265111898

Ich hatte bisher immer das Gefühl, dass Vimeo bei diesem Thema ein Schritt weiter ist.

[Gabe]

Hey @HenryAuffahrt 

Wie Finer sagt. Man könnte das im Code auch ggf. anschauen und ein Experte könnte euch diesbzgl. weiterhelfen.

Du könntest den Videoplayer mit JavaScript und CSS anpassen, um sicherzustellen, dass das Video bei Klick auf "Play" sofort im Vollbildmodus abgespielt wird mit einem Code wie:

document.addEventListener('DOMContentLoaded', function() {
 var video = document.querySelector('video');
 if (video) {
   video.addEventListener('play', function() {
     if (video.requestFullscreen) {
       video.requestFullscreen();
     } else if (video.mozRequestFullScreen) {
       video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
       video.webkitRequestFullscreen();
     } else if (video.msRequestFullscreen) {
       video.msRequestFullscreen();
     }
   });
 }
});

Füge diesen Code in einer JavaScript-Datei im Theme hinzu, oder platziere ihn in einem <script>-Tag auf der entsprechenden Produktseite.

Andernfalls können vielleicht unsere Page Builder Apps helfen oder weitere Video Apps hier.

[HenryAuffahrt]

Hallo @Gabe,

danke für den Input. Leider funktioniert der Code nicht. 

Ist dies insgesamt ein Thema, welches im Theme gelöst werden muss? Meine Erwartung wäre, dass es hier seitens Shopify eine Best-Practise gibt, wie man unseren oben aufgeführten Use-Case abbilden kann.

Ich denke das würde vielen Merchants helfen.

[Gabe]

Hey Henry! @HenryAuffahrt 

Da diese Sache nicht überall vorkommt und hauptsächlich externe Bedingungen und Gegebenheiten unterlegen ist (Browser der User, Theme, deren Devices, usw.) wird Shopify hier nicht viel machen können leider. 

Gib uns doch einen befristeten Vorschaulink zu einem Beispiel, so dass wird das auf Handy testen können. Ich habe auch einen Video in einem Shop gefunden dass praktisch hochkant ist (nicht ganz) und es funzt ausgezeichnet wenn du es in diesem Format machen möchtest auf Vimeo wie @Finer schon verlinkt hat. Siehe das Beispiel hier.

[Gabe]

@HenryAuffahrt 

Siehe meinen video hier wo ich das mit dem Vimeo Player vergleiche.

[HenryAuffahrt]

Danke @Gabe  das hilft mir,

ich hab mal das Dawn Theme frisch installiert, hier mal einem Preview Link.

Hier wird das Video genauso ausgespielt wie in deinen Beispiel Shop.

Bedeutet für mich, ich muss diese Technische Lösung eigentlich nur noch noch von Dawn in unser Theme übernehmen. Das werde ich mal ausprobieren.

[Gabe]

Hey Henry! @HenryAuffahrt 

Das sieht schonmal besser aus mit den zwei anderen Videos, aber "Unge's neues Auto" ist immer noch nicht optimal denn der YT Video Player spielt den Video im iFrame im Vertical 9:16 Format in einem 16:9 Canvas und deswegen sieht man immer noch den Canvas um den Video rum.

Wie hast du die anderen zwei Videos im Vertical Format eingebunden? Oder war das der Dawn Update?

Im Update Log des Dawn Theme sehe ich ein paar Video Updates aber nichts überragendes:

Du musstest ggf. den Video in einem externen Video Editor wie www.veed.io anders dimensionieren. Du möchtest praktisch den "Tiktok Effekt", sprich, das gar kein Canvas zu sehen ist beim 9:16 Vertical Format und YT oder Vimeo machen das nicht.

Die andere Option wäre kein Video Player zu verwenden und den Video als MP4 direkt im product.liquid einzubinden.

[HenryAuffahrt · Accepted solution]

Das ist alles Dawn standard. Die Implementieren die Videos anders als es das Impulse Team tut. 

Technisch gesehen wird dabei folgender Output verwendet: https://shopify.dev/docs/api/liquid/objects/external_video

Aber ja der Youtube Player ist echt blöd! Nativ Shopify oder Vimeo gefällt mir auch am besten.

Es ist nur sehr aufwändig, ein Theme auf diese Integration umzubauen. Dawn macht hier echt einiges richtig!

[HenryAuffahrt]

Hallo @Finer,

ich habe den Test mit deinen Vimeo Video durchgeführt, leider ebenfalls ohne Erfolg. Auf meinem iPhone funktioniert der Vollbildmodus hier nicht.

Du kannst dir das Ergebnis gerne selbst anschauen: https://caamate.de/products/nicht-kaufen-produkt

Am besten verhält sich also immer noch das Video, welches direkt bei Shopify hochgeladen worden ist.

[Gabe]

Ah ok, lass mich das mal 👀

Siehe meinen video hier wo ich das mit dem Vimeo Player vergleiche.