{"id":2440,"date":"2017-01-26T18:00:56","date_gmt":"2017-01-26T17:00:56","guid":{"rendered":"http:\/\/www.unicoda.com\/?p=2440"},"modified":"2017-01-22T16:55:11","modified_gmt":"2017-01-22T15:55:11","slug":"modification-de-lintegration-dune-video-youtube-en-particulier","status":"publish","type":"post","link":"https:\/\/www.unicoda.com\/?p=2440","title":{"rendered":"Modification de l’int\u00e9gration d’une vid\u00e9o (Youtube en particulier)"},"content":{"rendered":"

Dans un article pr\u00e9c\u00e9dent<\/a>, j’\u00e9voquais rapidement le probl\u00e8me des requ\u00eates vers des sites externes pour charger des contenus tels que polices d’\u00e9criture, scripts JS, et autres. Je faisais donc remarquer que l’int\u00e9gration d’une vid\u00e9o Youtube dans un article rentrait dans ce cas, et qu’il ne semblait pas y avoir beaucoup de solutions.<\/p>\n

Apr\u00e8s y avoir r\u00e9fl\u00e9chi plusieurs fois depuis, j’ai trouv\u00e9 une solution qui me convient. Plut\u00f4t que d’int\u00e9grer toute la vid\u00e9o via le m\u00e9canisme automatique de WordPress et ainsi obliger les visiteurs \u00e0 r\u00e9cup\u00e9rer du script JavaScript sur les serveurs Youtube, j’ai d\u00e9cid\u00e9 de remplacer le lecteur int\u00e9gr\u00e9 par une simple image comportant un lien vers la vid\u00e9o que je souhaite partager. Ainsi, plus de requ\u00eate vers les serveurs Youtube de Google, je r\u00e9cup\u00e8re l’image de la vid\u00e9o et la stocke directement sur mon serveur. Ajoutons \u00e0 cela que si le visiteur souhaite visionner la vid\u00e9o, celui-ci sera donc rediriger vers Youtube, mais si celui-ci a bloqu\u00e9 la transmission de l’information referer (le site d’origine sur lequel vous avez cliqu\u00e9 sur le lien), Youtube ne sera pas en mesure de faire le lien entre votre lecture de l’article int\u00e9grant la vid\u00e9o et le visionnage de celle-ci.<\/p>\n

Passons \u00e0 la pratique. Si je d\u00e9sire int\u00e9grer \u00e0 cet article le clip pour Towers<\/em> de Bon Iver, d\u00e9couvert par hasard l’an dernier et dont l’url est :<\/p>\n

https:\/\/www.youtube.com\/watch?v=t60roHM1t7o<\/pre>\n
\u00c0\u00a0l’aide de la console Firefox, j’ai d\u00e9termin\u00e9 l’url \u00e0 appeler pour r\u00e9cup\u00e9rer l’image de pr\u00e9sentation d’une vid\u00e9o Youtube, \u00e0 savoir :<\/p>\n
https:\/\/i.ytimg.com\/vi\/<id-vid\u00e9o>\/maxresdefault.jpg<\/pre>\n
O\u00f9 <id-vid\u00e9o><\/em> correspond \u00e0 l’identifiant Youtube de la vid\u00e9o pr\u00e9sent dans le param\u00e8tre v<\/em> de l’url de la vid\u00e9o, \u00e0 savoir ici t60roHM1t7o<\/em>, ce qui nous donne donc :<\/p>\n
https:\/\/i.ytimg.com\/vi\/t60roHM1t7o\/maxresdefault.jpg<\/pre>\n
Si ce lien ne permet pas de r\u00e9cup\u00e9rer la miniature de la vid\u00e9o, on peut se tourner vers :<\/p>\n
https:\/\/i.ytimg.com\/vi\/<id-vid\u00e9o>\/hqdefault.jpg<\/pre>\n
Illustration avec la miniature du court m\u00e9trage Sintel de la Blender Foundation :<\/p>\n
https:\/\/i.ytimg.com\/vi\/eRsGyueVLvQ\/hqdefault.jpg<\/pre>\n
Je r\u00e9cup\u00e8re donc l’image, l’ajoute \u00e0 la biblioth\u00e8que de m\u00e9dias WordPress et l’ins\u00e8re dans l’article. Apr\u00e8s avoir trouv\u00e9 une taille d’affichage correcte, j’\u00e9dite les param\u00e8tres WordPress de l’image dans l’article et en particulier le champ \u00ab\u00a0L\u00e9gende\u00a0\u00bb qui contiendra \u00ab\u00a0Lien vers la vid\u00e9o \u00ab\u00a0Bon Iver – Towers\u00a0\u00bb\u00a0\u00bb. Je modifie \u00e9galement le champ \u00ab\u00a0Lier \u00e0\u00a0\u00bb, s\u00e9lectionne \u00ab\u00a0Lien personnalis\u00e9\u00a0\u00bb et ajoute dans le champ qui appara\u00eet le lien vers la vid\u00e9o. Enfin, je coche \u00ab\u00a0Ouvrir le lien dans un nouvel onglet\u00a0\u00bb. Et voici le r\u00e9sultat :<\/p>\n
<\/a>
Lien vers la vid\u00e9o \u00ab\u00a0Bon Iver – Towers\u00a0\u00bb<\/figcaption><\/figure>\n
De cette fa\u00e7on, j’\u00e9vite qu’un visiteur affichant la page soit forc\u00e9 de charger des scripts en provenance des serveurs Youtube de Google. Seul les lecteurs souhaitant d\u00e9couvrir le contenu de la vid\u00e9o pourront alors cliquer sur le lien via l’image. Je laisse maintenant ceux qui le souhaitent faire l’essai du syst\u00e8me; bonne d\u00e9couverte musicale !<\/p>\n","protected":false},"excerpt":{"rendered":"
Dans un article pr\u00e9c\u00e9dent, j’\u00e9voquais rapidement le probl\u00e8me des requ\u00eates vers des sites externes pour charger des contenus tels que polices d’\u00e9criture, scripts JS, et autres. Je faisais donc remarquer que l’int\u00e9gration d’une vid\u00e9o Youtube dans un article rentrait dans ce cas, et qu’il ne semblait pas y avoir beaucoup de solutions. Apr\u00e8s y avoir … Continuer la lecture de « Modification de l’int\u00e9gration d’une vid\u00e9o (Youtube en particulier) »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,41],"tags":[],"class_list":["post-2440","post","type-post","status-publish","format-standard","hentry","category-divers","category-musique"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2440"}],"version-history":[{"count":5,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions"}],"predecessor-version":[{"id":2503,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions\/2503"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}