Intégrer une vidéo sur votre site web (embed)

Nouveau sur Videas ? Commencez par Premiers pas : tour de l’interface.

Intégrer une vidéo Videas sur votre site, c’est inviter votre audience à consommer du contenu hébergé dans Videas sans quitter votre site. La modale Intégrer vous propose deux méthodes (Script recommandé, ou iframe pour les CMS restrictifs), des dimensions responsive par défaut, et des options par type de média (vidéo, audio, image, document, collection). Ce guide vous accompagne du clic sur Intégrer au collage du code dans votre WordPress, Wix, Notion ou page HTML maison — avec les bonnes pratiques qui évitent les pièges classiques (code obsolète, lecteur qui dépasse du conteneur, CMS qui bloque le JS).

Prérequis

• Un média publié dans Videas (vidéo, audio, image, document, collection)
• Une page web où intégrer le contenu, avec accès au HTML (bloc HTML personnalisé, code source, ou CMS qui accepte les embeds)
• Le rôle Member ou supérieur sur l’espace

Ce que vous allez apprendre

• Ouvrir la modale Intégrer depuis un média
• Choisir entre Script et iframe selon votre site
• Configurer les dimensions (responsive ou fixes)
• Adapter les options de lecture au type de média (vidéo, audio, image, document, collection)
• Coller le code sur les CMS courants (WordPress, Wix, Squarespace, Notion, Webflow)
• Repérer l’indicateur “Code obsolète” et savoir comment réagir

Étape 1 : Ouvrir la modale Intégrer

Depuis votre médiathèque :

1. Ouvrez la fiche du média (ou de la collection)
2. Cliquez sur le bouton Intégrer (à côté du bouton Partager)

La modale s’ouvre avec, de haut en bas :

• Le code embed prêt à copier (premier card, surligné)
• Le lien direct vers le lecteur (deuxième card, optionnel)
• Les options de personnalisation (méthode, dimensions, lecture…)
• Un raccourci vers les options avancées

Étape 2 : Choisir la méthode d’embed

Deux méthodes équivalentes en termes de rendu, mais avec des trade-offs.

Recommandation par défaut : Script, sauf si votre CMS bloque les balises <script>. Vous bénéficierez automatiquement des évolutions du lecteur Videas sans avoir à recopier le code.

Étape 3 : Configurer les dimensions

Mode Responsive (recommandé)

Le toggle Responsive est activé par défaut. Le lecteur s’adapte automatiquement à la largeur de son conteneur dans votre page : plein largeur sur desktop, plein largeur sur mobile, sans débordement. Vous pouvez quand même choisir une hauteur (ou laisser celle par défaut, qui dépend du type de média).

Mode Fixe

Désactivez le toggle Responsive : deux champs apparaissent (largeur et hauteur, en pixels). À utiliser quand votre maquette impose une dimension précise (par exemple un encart de 480 px dans une sidebar fixe).

Dimensions par défaut

Videas adapte les dimensions par défaut au type de média :

Conseil : sur les vidéos, gardez le ratio 16:9 même en mode fixe. Sur les documents PDF, augmentez la hauteur si vous voulez voir plusieurs pages d’un coup.

Étape 4 : Configurer les options de lecture

Le tableau d’options dépend du type de média intégré.

À noter : la lecture automatique est souvent bloquée par défaut par les navigateurs sur mobile et desktop (sauf si la vidéo est aussi en muet). Pour un démarrage automatique fiable, combinez Lecture automatique + Muet, et invitez le visiteur à activer le son.

Étape 5 : Cas particulier des collections

Les collections vidéo et document proposent en plus un sélecteur Mode d’affichage, qui détermine comment la liste des médias est présentée à côté du lecteur.

Les collections d’images (galeries) bénéficient quant à elles d’options spécifiques : diaporama auto-déroulant, légendes, téléchargement par image. Voir Intégrer une collection de vidéos sur votre site pour les détails de cas d’usage par type de collection.

Étape 6 : Utiliser un préréglage d’embed

Si votre organisation a configuré des préréglages (combinaisons d’options pré-validées), ils apparaissent en chips au-dessus du tableau d’options.

• Cliquez sur une chip : le préréglage s’applique en un clic à toutes les options
• Cliquez à nouveau sur la même chip : retour aux options manuelles précédentes

Les préréglages sont gérés au niveau de l’espace de travail. Ils sont précieux pour garantir une cohérence d’apparence sur tous les embeds du site (un seul thème, un seul jeu d’options). Voir Créer et personnaliser un thème de lecteur pour la configuration.

Étape 7 : Copier le code

Le code embed est affiché en haut de la modale dans une carte cliquable avec coloration syntaxique. Trois façons de le copier :

• Cliquer sur la carte elle-même (le code entier est copié)
• Cliquer sur le bouton Copier le code dans la card
• Cliquer sur le bouton Copier dans le footer (en bas de la modale)

Indicateur “Code obsolète”

Si vous copiez le code, puis modifiez une option ensuite, la carte passe en fond orange avec la mention “Recopier le code”. C’est un garde-fou : ce que vous avez collé sur votre site ne reflète plus les options actuelles. Cliquez à nouveau sur Copier pour récupérer la version à jour.

À retenir : ne collez jamais un embed sur votre site avant d’avoir vérifié qu’il n’y a pas d’indicateur orange dans la modale. C’est le piège le plus courant : on règle ses options après avoir collé, et le rendu en ligne ne change pas.

Étape 8 : Coller sur votre site

Page HTML maison

Collez le code à l’endroit voulu de votre <body>. Pas de précaution particulière. Pensez à entourer d’un conteneur si vous voulez contrôler les marges :

<div class="ma-video">
  <!-- snippet Videas ici -->
</div>

WordPress

• Éditeur Gutenberg : ajoutez un bloc HTML personnalisé (ou Custom HTML) et collez le snippet
• Éditeur Classique : passez en mode Texte (pas Visuel), collez le code
• Si Script bloqué : utilisez la méthode iframe depuis la modale Videas

Wix

• Ajoutez un élément HTML personnalisé (Embed > HTML iframe / code)
• Collez le snippet — Wix accepte les iframes mais bloque souvent les <script> externes : préférez la méthode iframe

Squarespace

• Ajoutez un bloc Code ou Embed
• Le bloc Embed accepte les iframes ; le bloc Code accepte les scripts (selon le plan)

Notion

• Tapez /embed pour insérer un bloc embed
• Notion n’accepte pas les <script> : utilisez exclusivement la méthode iframe, en collant uniquement l’URL du lien direct (deuxième card de la modale Videas)

Webflow

• Ajoutez un élément Embed dans le designer
• Collez le snippet (Script ou iframe selon votre plan)

Confluence / wikis internes

• Bloc Insert > HTML ou Iframe Macro selon la configuration de votre instance
• Préférez iframe : la plupart des wikis filtrent les balises <script>

Étape 9 : Tester l’intégration

Avant de pousser en production :

1. Charger la page dans un navigateur récent (Chrome / Firefox / Safari)
2. Vérifier que le lecteur s’affiche au bon endroit, sans débordement
3. Lancer la lecture : son, image, contrôles, plein écran
4. Redimensionner la fenêtre : le lecteur doit rester proportionnel (mode responsive)
5. Tester sur mobile ou via les DevTools (mode responsive design) — le mobile est souvent l’angle mort des intégrations

Si le lecteur ne s’affiche pas, vérifiez :

• La console JavaScript du navigateur (F12) : erreurs éventuelles
• La présence d’un bloqueur de publicités ou d’un Content Security Policy qui interdit le domaine Videas
• Le mode iframe si la méthode Script ne passe pas

Bonnes pratiques

Responsive par défaut

Sauf maquette qui impose une largeur fixe (encart sidebar, modale), gardez le mode responsive activé. Vous évitez les débordements horizontaux et les bandes noires sur mobile.

Préférer la méthode Script

Le lecteur Videas évolue (nouvelles features, corrections, performances). Avec la méthode Script, votre embed bénéficie de ces évolutions sans recopier le code. Avec iframe, vous restez figé sur la version de l’embed au moment où vous avez collé.

Tester avant déploiement

Toujours tester sur la page finale avant de publier en production. Un embed qui marche en prévisualisation Videas peut ne pas s’afficher correctement sur votre CMS à cause d’un CSS de la page qui contraint l’iframe.

Sécuriser les intégrations sensibles

Pour des contenus confidentiels diffusés en embed (formation interne, contenu B2B premium), envisagez la sécurisation par token + restriction de domaine : seul votre domaine peut afficher le lecteur. Voir Sécuriser vos intégrations avec des tokens et domaines.

Cohérence visuelle via les préréglages

Si vous publiez beaucoup d’embeds, créez un préréglage au niveau de l’espace : tous vos embeds suivront le même thème, les mêmes options, sans avoir à les régler un par un. Voir Créer et personnaliser un thème de lecteur.

En résumé

• La modale Intégrer s’ouvre depuis la fiche du média et propose 2 méthodes : Script (recommandée) ou iframe (compatible partout)
• Responsive activé par défaut ; dimensions par défaut adaptées au type de média (640×360 vidéo, 640×400 audio, 640×800 PDF, 640×600 collection)
• Options par type de média : autoplay/loop/muted (vidéo), zoom/fullscreen/download (image), shuffle (collection audios), slideshow (collection images), modes Drawer/Bottom Bar/Sidebar (collection vidéos/docs)
• Préréglages d’embed appliqués en un clic si configurés au niveau de l’espace
• Indicateur “Code obsolète” (fond orange) quand on modifie une option après copie — recopier avant de coller
• Compatibilité CMS : WordPress (Script ou iframe), Wix / Notion / wikis (iframe uniquement), Webflow (les deux)
• Toujours tester sur la page finale et en mobile avant de pousser en production

Articles liés

• Options avancées d’intégration vidéo
• Intégrer une collection de vidéos sur votre site
• Créer et personnaliser un thème de lecteur
• Sécuriser vos intégrations avec des tokens et domaines