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.
Le 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 :
Téléchargez la vidéo avec le bouton Upload files :
Vous obtiendrez un URL qui vous servira plus tard :
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 :
Et le coller dans la description de votre page produit, à l'endroit souhaité :
Pensez à 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 :
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 :
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 :
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 :
