Cliquez sur « Files » -> « Upload » et allez chercher votre vidéo sur votre ordinateur

Une fois la vidéo sur le serveur de shopify, copier/coller le lien du champ URL et stockez ce bout de code que nous nommerons CODE1 dans votre bloc note ou autre éditeur de votre choix

tuto1

Ca va donnez quelque chose de ce type:

CODE1 (code d’exemple) :

https://cdn.shopify.com/s/files/1/2031/3857/files/nomdupreoduit.mp4?68255290660821217701598

Ensuite vous allez copier/coller ce bout de code ci dessous dans votre bloc note en dessous du CODE1 pour avoir ceci:

CODE2 (à prendre) :

<video controls="controls" width="100%" height="100%" src="CODE1"></video>

Maintenant vous allez remplacer la zone de code src=CODE1 par l’URL de votre CODE1 pour avoir quelque chose du genre (en gardant les guillemets):

CODE3 (code d’exemple du code final que vous devez avoir):

<video controls="controls" width="100%" height="100%" src="https://cdn.shopify.com/s/files/1/2031/3857/files/nomdupreoduit.mp4?68255290660821217701598"></video>

Rendez vous ensuite sur une de vos fiches produit et cliquez sur le bouton <> (show html) pour rentrer en mode codage et copiez le CODE3 ou vous voulez

tuto2

tuto3

La vidéo prendra toute la largeur de la zone et s’adaptera automatiquement en hauteur

Ce code est optimisée pour que la vidéo soit redimensionnée automatiquement sur tablette et smartphone

Si vous souhaitez que la vidéo se lance automatiquement vous devez rajouter entre height=100% et src=…. le code suivant pour avoir quelque chose de ce type:

autoplay

…height=100% autoplay src=…

Respectez bien les ouvertures et fermetures de balises afin d’éviter tout problème… 

Les balises sont les zones de codes commencent pas < et finissant par >

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

Merci de me laisser une petite note 😉
[Note moyenne: 0 sur 0]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 67 commentaires

    1. Merci Christian

  1. Excellent tuto, un grand MERCI 🙂

    1. Merci RY 🙂

  2. Bonjour et un grand merci pour tout votre travail.

    Est ce que ce tuto veut dire que l’on peut importer sur notre shop des videos de youtube sans que FB détecte que c’est du youtube ?

    Merci d’avance pour la reponse 🙂

  3. Possible d’avoir une solution pour mettre la vidéo en page d’accueil ? Merci !

    1. Salut, tu suis la même procédure mais tu colle le code dans une section custom html si bien sur ton thème a ce type de bloc

      1. Salut Dgeo,

        Qd je copie le code dans la partie custom html comment je fais pour faire un lien vers un produit ou une collection stp?

        Merci beaucoup!

  4. Bonsoir,

    Pour moi cela ne fonctionne pas j’ai un fond gris avec écrit : le format vidéo ou le type MIME n’est pas géré

    Quel format vidéo faut il utiliser ? Ma vidéo est au format .wmv

    Merci de votre aide.

    1. Bonsoir, il faut un format mpeg 🙂

      Bonne soirée

      1. Bonsoir merci de la réponse j’ai converti la vidéo en mpeg ça m’indique la même chose 🙁

  5. Format WebM ça marche impeccable !
    Merci

  6. Bonjour,

    J’utilise une vdéo mp4. Je l’ai téléchargé et je peux la visionner sans problème depuis mes fichiers téléchargés. Du coup, je ne comprends pas pourquoi j’ai aussi le message « le format vidéo ou le type MIME n’est pas géré » lorsque je fais la manip pour l’avoir dans mon article de blog.

    Je voudrais bien la télécharger en WEBM, mais dans ma page de téléchargement keepvid, ça fait 25Mo, et on est limité à 20Mo. Ça craint parce que j’ai droit à du 480p en mp4 pour 17Mo et du 360p en WEBM pour 25Mo…

  7. Bonjour, quelle est l’utilité de faire cela ? J’imagine qu’il y en a une, je souhaite juste savoir.

    Merci

    1. Bonjour, éviter de mettre ses vidéos sur les réseaux sociaux et c’est une demande récurrente de la communauté 😉

  8. Salut,
    comment faire la même chose sur une page d’accueil o il est possible de mettre une vidéo!? Come sur le thème Narrative par exemple!

    Merci pour ton retour et tous tes tutos!

    1. Tu dois avoir un custom HTML section dans ton thème il te suffit de coller le code directement dedans

  9. Excellent !!!

  10. Bonjour, j’aurai souhaiter mettre ma vidéo sur ma page d’accueil mais il m’est impossible pour moi de comprendre dans quelle ranger de code le mettre et je n’ai pas envie de toucher à tout..
    j’ai un grand menu dans Customize avec tout les selections  » Layout » « Templates » « Secrtions » « Snippets » « Assets » « Config » « Locales ».. remplis de code
    help me please 🙂

    1. Salut, il faut que tu trouve dans online store – customize – sections – add custom html ensuite tu mets le code de la vidéo et tu valide 😉

  11. Super !!! Est ce que c’est possible d’enlever la partie téléchargement de la vidéo pour éviter les plagiats ?
    Merci

  12. bonsoir, existe t-il un code identique mais pour une carte de France interactive merci bien

    1. Bonjour, non pas à ma connaissance

  13. Bonjour je souhaiterais mettre une vidéo à l’emplacement d’une image . Connaissez-vous la procédure à suivre ? merci d’avance

  14. Bonjour,
    Merci beaucoup! très utile!

    Une question: Je trouve que ma vidéo ne monte pas suffisamment haut (trop d’espace avec le « header »).

    Suite obligé de codé si je veux « remonter » l’emplacement de ma vidéo?

    Merci encore,

    SV

  15. Je ne peux pas télécharger la vidéo

    The following files could not be added:
    « *************.mp4 » exceeds the 20MB file size

    Merci

  16. Ca ne risque pas de ralentir le site ??

    1. j’ai la même question je me demande si cela ne risque pas d’avoir trop de volume sur son site et ralentir les opérations

      1. Tout dépend du poid de la vidéo, parfois interne pèse moins lourd qu’une externe de poid plus conséquent, le mieux étant de faire des splits tests des 2

  17. Bonjour,

    Merci pour le truc,

    J’ai cependant un petit problème, ok sur l’ordi mais sur le smartphone il n’y à rien.
    C-est-à-dire que j’ai juste le texte de la description qui est descendu… mais pas de vidéo.

    Une idée ?

    D’avance merci.

    1. Bizarre, il faudrait voir le site car comme ca je ne vois pas. bonne soirée

  18. Bonjour,
    pouvez vous me dire ou se trouve le files dans ma fiche produit? merci
    Cliquez sur « Files » -> « Upload » et allez chercher votre vidéo sur votre ordinateur

    1. Bonsoir, ce n’est pas dans la fiche produit mais dans Settings – Files etc…

  19. Bonjour, vous dite cliquez sur « Files » – mais ou se trouve « Files » ?
    Je ne le vois pas sur la page produit pour ajouter une vidéo…!

  20. J’AI TROUVER !

    MERCI

  21. Comment faire si l’on veut mettre un gif animé à la place d’une vidéo MP4 ?

  22. La vidéo s’affiche bien mais l’autoplay ne marche pas. J’ai essayé les différentes balises HMTL possible. Quand j’applique votre méthode, il me rajoute automatiquement un = »  » juste après le mot auoplay . Je suis sur le thème Debut. Vous auriez une idée d’où peut venir le problème? Merci

    1. Hello, alors attention certaines navigateurs empêchent l’autoplay désormais et surtout sur mobile. c’est une mauvaise pratique que les nouvelles règles sanctionnent. Bonne soirée

    1. Hello, non malheureusement shopify n’autorise pas ce choix 🙁

  23. Salut Dgeo,
    Excellent le travail que tu partage! Merci
    Peux stp m’expliquer comment peut-on mettre la description produit s’afficher sur toute la page pas seulement à droite dans le thème Brooklyn si c’est possible bien sur?
    Merci par avance

    1. Hello, merci 😉
      Il te faut trouver dans product-template ou product selon les thèmes le {{ product.description }} et le couper/coller a différent endroit plus bas jusqu’à trouver l’emplacement voulu 😉

  24. Bonjour Dgeo Dev,

    Tous bien fait top Merci
    Par contre est-il possible de diminué la taille ?
    Elle prend toute la page, est-il possible de mettre une taille prescise ?
    Merci

    Ps : Est -il possible d’avoir un coaching personnalisé avec vous ?
    Pour la configuration de mon thème

    1. Hello, merci 😉

  25. bonjour,

    J’ai bien upload la video dans le serveur shopify mais ensuite lorsque la manipulation est fini la vidéo est bien sur la page produit, mais impossible que la vidéo démarre.

    Cela peut venir de quoi? merci beaucoup

    1. Hello, mauvais format ou codec, il faut du mpg4. Bonne soirée

  26. merci beaucoup!!! j’avais oublier les balise d’ouverture et de fermeture mais maintenant c bon !!! bien à vous

  27. MERCI BEAUCOUP 10/10

  28. Salut ! tu es un grand malade mais cela fonctionne extrêmement bien, j’ai pas tout compris de-suite mais en se posant et tranquillement étape par étape BINGO !!! mille merci heureusement que des grand fou de la magie informatique et de bidouille existe comme toi et qui surtout partage leurs connaissance alors encore MERCI c’est juste extra !!!!

    1. Hello, Super ! merci pour ton message 🙂

  29. Un grand merci pour cette astuce facile à mettre en place et qui a fonctionné au premier essai 😉

  30. Salut boss coment on fait pour centrer la video je n ai pas trouve coment faire , meci davanc

    1. Hello, il faut rajouter dans la balise vidéo un style=’margin:0 auto;’

  31. Super tuto efficace
    merci pour le service

  32. bonjour,
    super tuto merci bcp.
    comment faire pour l’avoir en boucle
    merci

  33. bonjour Dgeo, merci pour ce tuto! Sur le mobile ça rend bien mais sur le pc ça prend toute la largeur de la page et donc ca ne fait pas joli, y a t-il moyen de rétrécir la vidéo? Merci d’avance

  34. Bonjour,
    Merci pour votre tuto.
    Je ne comprends juste pas cette partie là « Cliquez sur « Files » -> « Upload » et allez chercher votre vidéo sur votre ordinateur »

    Ou se trouve l’endroit ou il y a le « Files » initial ? A noter que mon shopify est en français..
    Un grand merci pour votre prochaine réponse que j’espère rapide.

    1. Bonjour et merci pour le message 🙂 Il faut se rendre tout en bas dans Paramètres – Fichiers. Bon WE à vous.

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Booster ton taux de conversion ?

J'ai créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

En savoir plus