wiki.cobea
Ajouter un embed Soundcloud, Vimeo, Youtube… (Intégration d’iframes)
Parfois il est nécessaire d'ajouter un code d'intégration (embed) pour que l'on puisse lire une vidéo ou un podcast depuis votre site. Comment le faire de manière sécurisée ?
La solution simple
Lorsque l’on souhaite ajouter une intégration avec un service tel que Vimeo, Soundcloud ou Youtube dans un WordPress ou dans Beaver Builder, il y a en général une procédure qui nous donne un « code embed« , qui ressemble à ça :
<iframe src="https://soundcloud.com/…" width="720" height="450">…</iframe>
Sauf que ce genre de code HTML est considéré comme dangereux par WordPress et/ou Beaver Builder, car il peut contenir du code malveillant. Vous aviez l’impression de copier-coller du code inoffensif, mais si le site depuis lequel vous l’avez copié a été piraté, cela pourrait donner une porte d’entrée sur votre sites à des personnes mal intentionnées.
Pour éviter ça WordPress bloque par défaut ce genre de code, ce qui peut donner l’impression que nos modifications n’ont juste pas été enregistrées (il n’y a pas toujours un message d’erreur expliquant la cause du problème).
Mais Wordrpess est au courant que c’est un besoin légitime que d’afficher une vidéo ou un podcast sur son site ! Il existe donc un système de détection des liens automatique qui va remplacer un simple lien vers une page YouTube en un code embed correspondant, sans que vous ayez à faire quoi que ce soit et en étant sûr·e de la sécurité. Ça fonctionne avec les liens de YouTube, Vimeo et Soundcloud, TED, Tumblr (peut-être d’autres services, mais il faut qu’il soient assez connus et réputés).
Selon le service il faut peut-être trouver le bon type de lien : pour YouTube il suffit de copier-coller l’URL de la vidéo souhaitée, alors que pour Soundcloud il faut utiliser l’URL de partage.
Attention, il est possible qu’il faille autoriser l’intégration/embed dans les paramètres du services que vous utilisez (une vidéo privée sur YouTube ne peut pas être intégrée de cette façon).
Vous obtenez alors un player de vidéo ou audio « standard », qui fonctionne mais qui ne s’adapte pas forcément au design de votre site (vous souhaitez que le cadre de la vidéo soit aussi large que la colonne de texte dans laquelle il se trouve par exemple). Pour ce genre d’ajustements il faut quand même faire appel à nous, car il est nécessaire de rajouter du code, selon vos besoins.
Autres solutions
Si le lien automatique ne fonctionne pas, vous pouvez l’encadrer avec des balises
[ embed]. Par exemple, au lieu d’écrire https://soundcloud.com/…, écrivez [ embed]https://soundcloud.com…[/ embed] (sans les espaces dans les crochets embed, ils sont rajoutés ici car sinon le code s’active).
Si ça ne fonctionne toujours pas, il faut qu’on discute pour trouver un système qui gère ces codes embed pour le service que vous voulez intégrer au site, par exemple avec un plugin.