Freedam

Code d’intégration

Un code d’intégration (embed code) est un court extrait de HTML que vous collez dans une page web pour afficher un contenu hébergé ailleurs, comme un lecteur vidéo, une image ou un formulaire. Le contenu reste servi par le système qui le détient. La page n’en contient qu’une référence : son propriétaire peut donc le mettre à jour, le restreindre ou le désactiver sans modifier chaque page où il apparaît.

Mis à jour le

Types de codes d’intégration

Type À quoi il ressemble Contenu habituel
Iframe <iframe src="…">, qui charge une petite page (un lecteur) dans un cadre Vidéos, cartes, formulaires
Image hébergée <img src="…"> pointant vers une URL servie par le DAM ou un CDN, souvent avec srcset pour plusieurs largeurs Photos produit, bannières
Script <script src="…">, qui construit un widget dans la page Galeries, visionneuses interactives

L’élément iframe est défini dans le HTML Living Standard, maintenu par le WHATWG. Les iframes sont la forme la plus courante pour la vidéo, car le lecteur, ses commandes et sa logique de diffusion restent chez l’hébergeur. Un script peut faire davantage, mais il exécute le code d’un autre site dans votre page, ce que beaucoup de CMS et d’équipes de sécurité restreignent.

Codes d’intégration, permaliens et téléchargements

Un permalien (lien permanent) est une URL destinée à rester la même aussi longtemps que l’élément existe. Dans un DAM, il pointe en général vers un média ou l’une de ses tailles, pour qu’un site web ou un CMS puisse afficher l’image sans que personne ne copie le fichier.

Téléchargement Permalien Code d’intégration
Ce que vous remettez Un fichier Une URL Un extrait HTML
Où se trouve le fichier Sur le système du destinataire Chez le propriétaire Chez le propriétaire
Mises à jour Demandent une nouvelle copie Possibles à la source Possibles à la source
Retrait Impossible une fois envoyé Désactiver le lien Désactiver l’intégration

Chaque copie téléchargée échappe au contrôle du propriétaire. Un lien ou une intégration garde le média à un seul endroit, ce qui rend applicables l’expiration des droits et le retrait.

Contrôler où les intégrations apparaissent

  • Liste de domaines autorisés. L’hébergeur peut envoyer la directive frame-ancestors de la Content Security Policy (W3C), qui indique au navigateur sur quels sites la page peut s’afficher dans un cadre. Sur tout autre site, le navigateur affiche un cadre bloqué.
  • Révocation. Chaque intégration devrait être liée à un élément que le propriétaire peut désactiver, comme un partage ou un lien de publication.
  • Droits. Une intégration est une publication. La licence doit couvrir l’usage web dans les territoires concernés, et l’intégration doit s’arrêter quand la licence prend fin.
  • Accessibilité. Donnez un title à l’iframe et ajoutez des sous-titres aux vidéos : le critère de réussite 1.2.2 des WCAG 2.2 exige des sous-titres pour les vidéos préenregistrées avec son.
  • Lecture automatique. Les navigateurs ne lancent automatiquement une vidéo que si elle est muette.

Les intégrations dans le travail marketing

  • Un distributeur affiche la vidéo produit sur sa propre page produit avec une iframe, et l’intégration ne se lit que sur le domaine de ce distributeur.
  • L’équipe RH intègre une vidéo d’accueil dans l’intranet au lieu de joindre un gros fichier à chaque email de bienvenue.
  • L’équipe web utilise des liens d’images hébergées dans le CMS : une photo sous licence disparaît donc du site à la fin de sa licence au lieu de rester en ligne.
  • Une landing page de campagne charge des images en plusieurs largeurs à partir du même lien, et le navigateur choisit la bonne.

Erreurs fréquentes : télécharger une vidéo puis la réimporter sur un site web, ce qui crée une copie que personne ne suit ; utiliser la lecture automatique avec le son ; et oublier les intégrations encore actives à la fin d’une licence.

Les codes d’intégration dans Freedam

  • Intégrations vidéo. Le bouton Intégrer sous le lecteur d’une vidéo donne un extrait iframe. Vous choisissez une taille (480×270, 640×360, 854×480 ou personnalisée), un temps de départ, et si la vidéo se lance automatiquement, est muette, tourne en boucle et affiche les commandes. Il faut l’autorisation Partager publiquement, et la politique de droits de la vidéo doit autoriser la publication.
  • Chaque intégration repose sur un partage public en lecture seule, valable un an et prolongé automatiquement tant qu’il est utilisé. Révoquer ce partage dans Gestion des partages arrête l’intégration. Le lecteur diffuse la vidéo en streaming adaptatif (HLS), affiche l’affiche de la vidéo et propose ses sous-titres.
  • Les administrateurs peuvent définir pour l’espace de travail une liste de domaines d’intégration autorisés par défaut, et une liste distincte par partage. Les navigateurs ne lisent alors l’intégration que sur les sites listés.
  • Les codes d’intégration peuvent aussi être créés, lus et révoqués par l’API REST et le SDK TypeScript.
  • Liens d’images permanents. Un canal de publication de site web publie les images qui correspondent à ses conditions et dont les droits d’utilisation autorisent l’usage et le territoire du canal. Dans l’onglet Publication d’un média, Copier le lien donne un lien qui n’expire pas, à n’importe quelle largeur jusqu’à la taille maximale du canal, en AVIF, WebP ou JPEG selon le navigateur, et utilisable dans srcset. Les droits sont vérifiés à chaque requête, et le lien cesse de fonctionner quand l’image sort du canal. La publication fait partie des plans Business et Tailored.

Détails : la page développeurs sur les intégrations, ainsi que Affiches et sous-titres vidéo et Publication dans la documentation de Freedam.

Questions fréquentes

Quelle est la différence entre un code d’intégration et un lien ?

Un lien envoie le visiteur vers une autre page. Un code d’intégration affiche le contenu dans votre propre page. Les deux laissent le fichier chez son propriétaire, contrairement à un téléchargement.

Comment empêcher un site web d’intégrer ma vidéo ?

Restreignez l’intégration à une liste de domaines autorisés, que les navigateurs appliquent par frame-ancestors, ou révoquez le partage ou le lien qui se trouve derrière l’intégration. La révocation l’arrête partout à la fois.

Qu’est-ce qu’un permalien ?

Un permalien est une URL conçue pour ne pas changer, afin de pouvoir être enregistrée, citée ou placée dans un CMS. Pour les images, un lien permanent est utile quand le DAM vérifie encore les droits à chaque requête : un lien qui reste identique ne signifie donc pas que l’image reste en ligne après la fin de sa licence.

Termes associés

Nordi

Copiez un code d’intégration pour une vidéo

Importez une courte vidéo dans la photothèque de démonstration de Nordi, cliquez sur Intégrer sous le lecteur, choisissez une taille et un temps de départ, et copiez le code iframe.

Vous entrez dans l'espace de travail de Nordi en tant qu'administrateur.