Catégorie : Musique

Dans un article précédent, j’évoquais rapidement le problème des requêtes vers des sites externes pour charger des contenus tels que polices d’écriture, scripts JS, et autres. Je faisais donc remarquer que l’intégration d’une vidéo Youtube dans un article rentrait dans ce cas, et qu’il ne semblait pas y avoir beaucoup de solutions.

Après y avoir réfléchi plusieurs fois depuis, j’ai trouvé une solution qui me convient. Plutôt que d’intégrer toute la vidéo via le mécanisme automatique de WordPress et ainsi obliger les visiteurs à récupérer du script JavaScript sur les serveurs Youtube, j’ai décidé de remplacer le lecteur intégré par une simple image comportant un lien vers la vidéo que je souhaite partager. Ainsi, plus de requête vers les serveurs Youtube de Google, je récupère l’image de la vidéo et la stocke directement sur mon serveur. Ajoutons à cela que si le visiteur souhaite visionner la vidéo, celui-ci sera donc rediriger vers Youtube, mais si celui-ci a bloqué la transmission de l’information referer (le site d’origine sur lequel vous avez cliqué sur le lien), Youtube ne sera pas en mesure de faire le lien entre votre lecture de l’article intégrant la vidéo et le visionnage de celle-ci.

Passons à la pratique. Si je désire intégrer à cet article le clip pour Towers de Bon Iver, découvert par hasard l’an dernier et dont l’url est :

https://www.youtube.com/watch?v=t60roHM1t7o

À l’aide de la console Firefox, j’ai déterminé l’url à appeler pour récupérer l’image de présentation d’une vidéo Youtube, à savoir :

https://i.ytimg.com/vi/<id-vidéo>/maxresdefault.jpg

Où <id-vidéo> correspond à l’identifiant Youtube de la vidéo présent dans le paramètre v de l’url de la vidéo, à savoir ici t60roHM1t7o, ce qui nous donne donc :

https://i.ytimg.com/vi/t60roHM1t7o/maxresdefault.jpg

Si ce lien ne permet pas de récupérer la miniature de la vidéo, on peut se tourner vers :

https://i.ytimg.com/vi/<id-vidéo>/hqdefault.jpg

Illustration avec la miniature du court métrage Sintel de la Blender Foundation :

https://i.ytimg.com/vi/eRsGyueVLvQ/hqdefault.jpg

Je récupère donc l’image, l’ajoute à la bibliothèque de médias WordPress et l’insère dans l’article. Après avoir trouvé une taille d’affichage correcte, j’édite les paramètres WordPress de l’image dans l’article et en particulier le champ « Légende » qui contiendra « Lien vers la vidéo « Bon Iver – Towers » ». Je modifie également le champ « Lier à », sélectionne « Lien personnalisé » et ajoute dans le champ qui apparaît le lien vers la vidéo. Enfin, je coche « Ouvrir le lien dans un nouvel onglet ». Et voici le résultat :

De cette façon, j’évite qu’un visiteur affichant la page soit forcé de charger des scripts en provenance des serveurs Youtube de Google. Seul les lecteurs souhaitant découvrir le contenu de la vidéo pourront alors cliquer sur le lien via l’image. Je laisse maintenant ceux qui le souhaitent faire l’essai du système; bonne découverte musicale !