Ajouter une vidéo sur Shopify de manière optimisée

Sommaire

Lorsque l'on souhaite ajouter une vidéo sur sa boutique Shopify, dans la fiche produit par exemple, le premier réflexe est de l'héberger sur Youtube puis l'intégrer sur Shopify.

Or ce n'est pas vraiment une bonne idée !

Pourquoi ne pas ajouter une vidéo depuis Youtube ? 

Youtube propose un système rapide et facile pour intégrer une vidéo sur un site internet. Il faut tout d'abord héberger celle-ci sur sa plateforme puis récupérer le code iframe que l'on pourra placer n'importe où, dans le code de son site web.
intégrer vidéoLe principal problème est que Youtube, reste Youtube, et fera en sorte que vous vous rendiez sur sa plateforme. Pleins de zones seront alors cliquables et pourront rediriger vos visiteurs sur Youtube. Pas génial lorsque l'on souhaite garder nos visiteurs et les convertir en clients. Pire encore, il est fortement probable que des vidéos de concurrents apparaissent en suggestion.

Le second problème vient du fait qu'héberger une vidéo Youtube va ralentir votre boutique Shopify. En effet, Youtube génère des dizaines de requêtes pour communiquer avec ses serveurs et afficher correctement la vidéo.

La solution ? Héberger la vidéo sur Shopify

Avec Shopify, vous avez un espace de stockage illimité. Il est donc fortement conseillé d'héberger tout son contenu directement dessus pour bénéficier d'un contrôle total.

Télécharger la vidéo sur Shopify

Rendez-vous dans Settings puis Files :

settings puis filesTéléchargez la vidéo avec le bouton Upload files

Upload files

Vous obtiendrez un URL qui vous servira plus tard :

URL

Intégrer la vidéo sur sa boutique

Imaginons que vous vouliez ajouter une vidéo sur la page produit, dans la description de celle-ci.

Vous devez copier le code suivant :

<video controls="controls" style="max-width: 100%; height: auto;">
<source src="URL-DE-LA-VIDEO" type="video/mp4" />
</video>

Et le coller dans la description de votre page produit, à l'endroit souhaité :

description de votre page produitPensez à remplacer URL-DE-LA-VIDEO par l'url généré dans la partie "Télécharger la vidéo sur Shopify".

Cela vous donnera ceci :

exemple vidéo

Pour aller plus loin

Maintenant que l'on a ajouté notre vidéo, on va voir comment customiser le lecteur.

Il est possible d'ajouter quelques fonctions via des attributs :

  • loop : permet de lire la vidéo en boucle
  • poster : permet d'ajouter une image de présentation
  • autoplay : permet de lire la vidéo automatiquement
  • muted : permet de couper le son
  • controls : permet d'afficher les boutons d'actions (play, pause, agrandir etc...)
  • width : permet d'ajuster la largeur
  • height : permet d'ajuster la hauteur

Exemple, pour une vidéo où l'on veut : couper le son, une lecture en boucle, une largeur de 100% et les boutons de contrôles :

<video controls="controls" muted loop style="max-width: 100%; height: auto;">
<source src="URL-DE-LA-VIDEO" type="video/mp4" />
</video>

Pour aller encore plus loin

Ca y est ! On a ajouté une vidéo via Shopify, en créant notre propre lecteur. Nous allons voir à présent comment lui donner un look vraiment pro "à la Youtube".

Youtube présente les vidéos de la manière suivante : Une image de présentation et un gros bouton play. Lorsque l'on clique dessus l'image disparaît et la vidéo est lue, avec la présence des boutons de contrôles.

Nous allons donc essayer de reproduire la même chose.

Partons de la base suivante :

<div class="wrapper"><video controls="controls" style="max-width: 100%; height: auto;">
<source src="URL-DE-LA-VIDEO" type="video/mp4" />
</video><div>


Ajoutons un peu de CSS pour cacher le lecteur et ajouter un bouton play au centre : 

.video-wrapper {
position: relative;
}
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover {
opacity: 1;
}
.video-overlay-play-button.is-hidden {
display: none;
}

Terminons par ajouter le JS nécessaire au bon fonctionnement du bouton :

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
\
\
\
\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()

Voila le résultat :

résultat vidéo

Laissez un commentaire

Veuillez noter que les commentaires doivent être approvés avant d'être affichés