FROM CACHE - de_header

Video auf Produktseite einfügen html

chargerate
Tourist
7 0 1

Guten Tag, 
die Produktseite meines Shops war jetzt ewig sehr sehr langsam durch zwei eingebundene GIFs. 
Ich habe diese nun als MP4 erstellt und damit die Dateigröße erheblich reduziert. Diese MP4-Dateien
habe ich nun zu den Dateien meines Shops hinzugefügt und versucht statt der GIFs in die Seite einzufügen. 
Das war der Ansatz, den ich online gefunden habe, da ich möchte dass das Video direkt startet und sich wie ein GIF laufend wiederholt:
<video autoplay loop muted playsinline src="VIDEO LINK
"></video 

Ich bin leider blutiger Anfänger was html angeht und kenne mich daher überhaupt nicht aus.
Das Video funktioniert wie gewollt und befindet sich auch an der richtigen Stelle, ist aber viel größer als gewollt und ragt über die Seite hinaus.
Meine Seite, wie es mit den Gifs aussieht und auch wieder aussehen soll: https://chargerate.com/products/magneto1-0

Was kann ich hinzufügen, damit die Videos an der gleichen Stelle mit der richtigen Größe bleiben und nicht über den Rand hinausragen und sich trotzdem normal mit-skalieren, wenn man 
die Seite auf dem Handy oder anderen Auflösungen aufruft? 

Vielen Dank schonmal 

14 ANTWORTEN 14

Gabe
Shopify Staff
16357 2587 3853

Hey @chargerate 

Danke für die Frage und die Produktseite. Hier gibt es natürlich mehrere Optionen Video zur Produktseite hinzuzufügen wie man hier sieht. Bzgl. gif, stelle sicher, dass das nicht optimierte gifs sind, wie in diesem Leitfaden beschrieben.

Ich habe deine Seite jetzt getestet und keine langsamen Ladegeschwindigkeiten bekommen wie man hier sieht. Einziges waren die Quantity Breaks die ein paar rote flaggen erzeugt haben.

  • "Das Video funktioniert wie gewollt und befindet sich auch an der richtigen Stelle, ist aber viel größer als gewollt und ragt über die Seite hinaus. Was kann ich hinzufügen, damit die Videos an der gleichen Stelle mit der richtigen Größe bleiben und nicht über den Rand hinausragen und sich trotzdem normal mit-skalieren, wenn man die Seite auf dem Handy oder anderen Auflösungen aufruft?"

Ich habe das auf Handy nicht reproduzieren können, wie du hier sehen kannst. Schicke doch ein paar Bildschirmabgriffe und ggf. können wir das näher anschauen.

Außerdem möchte ich gerne wissen lassen, dass unsere Hilfe hier nicht endet, also lass gerne wissen, ob ich deine Frage damit beantwortet habe. Auch nicht vergessen dich rechtzeitig auf den BFCM vorzubereiten wie z.B. Geschenkkarten oder vielleicht ein Upgrade Ihrer Versandeinrichtung? Siehe unseren tollen Blog-Post dazu hier.

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

chargerate
Tourist
7 0 1

Vielen Dank für deine schnelle Antwort Gabe. 
Meine Kunden besuchen meine Produktseite zum Großteil mit Mobilgeräten und deswegen geht es mir hauptsächlich um die mobile Ladegeschwindigkeit. 
Wenn man meine Seite auf dem Handy aufruft kann man die ersten Inhalte recht schnell sehen, bis jedoch alle Apps und Gifs vollständig geladen haben dauert es einfach ewig. 
Ich habe auch eine sehr hohe bounce rate, was vermutlich daran liegt. 

Anbei einige Screenshots, welche genau das zeigen und vor alldem auch, dass meine Gifs hauptsächlich für das langsame Laden verantwortlich sind. 

Google Site Speed MobileGoogle Site Speed MobileShopify Geschwindigkeits-ScoreShopify Geschwindigkeits-ScoreGoogle Site Speed MobileGoogle Site Speed Mobile

Guido_Michele
Shopify Partner
91 25 72

Hallo @chargerate,

ich bin Theme und App Developer und Shopify Partner. Ich denke Dir kann geholfen werden 😉 

Die Größe und Positionierung kann einfach über CSS eingestellt werden. Allerdings bräuchte ich ein bisschen mehr Info. Am besten und einfachsten wäre es, wenn Du einen Link zu einer Preview des Shops postest, oder per message sendest, in der Du, wie beschrieben von Dir,die GIFs in Videos umgesetzt hast und jedoch die Größe / Position der Videos nicht optimal ist. Dies machst Du, indem Du Dir die Preview anzeigen lässt und dann den Button benutzt, um die Preview zu teilen. Du bekommst dann einen Link, der von anderen benutzt werden kann, um die Preview für begrenzte Zeit zu sehen. 

Grüße Guido

chargerate
Tourist
7 0 1

Vielen Dank @Guido_Michele


So sieht es aktuell aus und soll es wieder aussehen: 

chargerate_0-1605286225228.png

 

So sieht es aus, wenn ich es bearbeite: 

chargerate_1-1605286261266.png


Preview URL: https://eki90a6kl982ryc6-39444742311.shopifypreview.com/products_preview?preview_key=0de56e65c37bef9...

Vielen Dank für die Hilfe. 

chargerate
Tourist
7 0 1

Weiß da noch irgendjemand, was ich da einstellen oder hinzufügen muss? 

Mit freundlichen Grüßen 

Guido_Michele
Shopify Partner
91 25 72

@chargerate 

 

Leider kam ich zu spät, der Link ist abgelaufen.

Besteht das Problem noch?

 

Grüße Guido

chargerate
Tourist
7 0 1
Nein, danke ich habe es jemanden machen lassen.

Donauwalzer
Pfadfinder
92 2 29

Hallo!

Ganz kleine Zwischenfrage: beim Stöbern habe ich Euer Thema entdeckt und bin so auf Eure Seite gekommen. Euer Kontaktformular ist leicht zu finden und sehr funktionell. Verratet Ihr mir, welche App das ist oder gehört das zu Eurer Theme?

Danke

Petra

chargerate
Tourist
7 0 1
Bei meinem Theme ist das schon so vorhanden. Ich weiß nicht, wie es bei
anderen Themes ist aber ich dachte eigentlich, dass die Meisten solch eine
Kontaktform anbieten.

Bei mir ging das ganz einfach, indem ich eine neue Seite erstelle und dann
beim Vorlagensuffix unten page.contact auswähle.

Donauwalzer
Pfadfinder
92 2 29

Beneidenswert... unsere Theme war gar nicht so günstig (Expression), doch wir müssen eine App für Kontaktformulare verwenden... und Apps machen ja die Seite bekanntlich langsamer. Dachte auch, das wäre Standard... aber tja.

Eine reine Kontaktseite ist kein Problem (Tel, Adresse,...)... doch ein richtiges Formular, wo Kunde uns direkt kontaktieren kann wie bei Euch ist leider nicht Standard. Wie heißt Eure Theme?

Gruß

Petra

chargerate
Tourist
7 0 1
Narrative. Das ist sogar gratis.
Gabe
Shopify Staff
16357 2587 3853

@Donauwalzer 

Petra, ganz schnell was bzgl. entfernen von Frontend Apps. Einige Frontend Apps können auch das Theme Code ändern und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Siehe dazu bitte die App Dokumentation.

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Donauwalzer
Pfadfinder
92 2 29

Vielen Dank für den Hinweis... werden das recherchieren...

Gruß aus Österreich

Donauwalzer
Pfadfinder
92 2 29

Hab mich jetzt doch schlau gemacht und tatsächlich diese Kontakt-Seite gefunden... ist schon aktiviert und funktioniert prächtig... somit eine App weniger!!! Super!!

Vielen Dank!!!!!!!!!!!!!!!!!!!!!!!!!!

Gruß aus Österreich

Petra

PS: die Möchtegern-Techniker in meiner Familie werden staunen... 😉