Intégrer une vidéo sur votre site web
Pour intégrer une vidéo dans une page web : ouvrez le média dans Videas, cliquez sur Intégrer, copiez le code affiché et collez-le dans votre site. Le lecteur s’affiche alors directement sur votre page, sans que le visiteur quitte votre site ni crée de compte.
Pas encore de compte Videas ? L’outil Héberger une vidéo rend un code d’intégration depuis le navigateur, sans inscription — 2 Go et dix minutes par fichier, et le lien vit sept jours. Le compte gratuit le rend permanent sans changer l’adresse déjà collée sur votre page.
Le bouton Intégrer est distinct de Partager : Partager produit un lien vers une page hébergée par Videas, Intégrer produit un bout de code à coller dans votre page. Le reste de cet article détaille les réglages de la fenêtre Intégrer — méthode (Script ou iframe), dimensions, affichage intégré ou popover — puis comment coller le code sur les CMS courants.
Récupérer le code d’intégration
- Ouvrez le média (vidéo, audio, image, document ou collection) dans votre espace de travail
- Dans la barre d’actions en haut, cliquez sur Intégrer
- La fenêtre Intégrer s’ouvre avec l’instruction « Copiez ce code et collez-le sur votre site web »
- Cliquez sur la carte du code — ou sur Copier le code — le bouton passe à Code copié !
La fenêtre présente deux cartes que vous pouvez copier d’un clic :
- la carte code (badge HTML) : le bloc à coller sur votre site — c’est celle que vous utilisez dans la quasi-totalité des cas ;
- la carte lien (badge Lien) : l’URL brute du lecteur, utile quand votre outil n’accepte que des URL (voir Notion plus bas).
Choisir la méthode : Script ou iframe
La première option, Méthode d’intégration, propose deux boutons : Script (par défaut) et Iframe. Le rendu est le même ; la différence tient à la façon dont le lecteur est chargé.
| Méthode | Ce que c’est | À utiliser quand |
|---|---|---|
| Script (par défaut, recommandé) | Une balise <script> qui charge le lecteur Videas. Il se redimensionne tout seul, se met à jour automatiquement (nouvelles fonctions du lecteur sans recopier), et peut dialoguer avec votre page. |
Votre site accepte les balises <script> : page HTML maison, WordPress (bloc HTML), Webflow. |
| Iframe | Une balise <iframe> autonome. Le lecteur est figé à la version copiée ; pas de dialogue avec la page. |
Votre outil interdit le JavaScript externe : Notion, blocs HTML de Wix, wikis d’entreprise, intranets restrictifs. |
En cas de doute, laissez Script : c’est la méthode qui reste à jour toute seule.
Régler l’affichage : intégré ou popover
Avec la méthode Script, l’option Affichage propose deux modes :
- Intégré (par défaut) : le lecteur s’affiche directement dans la page, à l’emplacement du code.
- Popover : la vidéo ne se charge qu’au clic sur un déclencheur, puis s’ouvre en plein écran par-dessus la page. C’est idéal pour alléger une page qui contient plusieurs vidéos — rien n’est chargé tant que le visiteur ne le demande pas.
En mode Popover, vous choisissez le Déclencheur — un Bouton ou une Vignette — et, pour un bouton, son Libellé du bouton (par défaut « Voir la vidéo »). Le lien Aperçu ouvre une prévisualisation de la popup pour vérifier le rendu avant de copier.
Régler les dimensions
Par défaut, la vidéo est en Largeur responsive (recommandé) : le lecteur occupe 100 % de la largeur de son conteneur et s’adapte à tous les écrans, sans débordement. Vous choisissez alors seulement un Format (ratio) parmi les préréglages proposés, ou Personnalisé pour saisir votre propre rapport largeur/hauteur.
Pour imposer une taille fixe (par exemple un encart dans une colonne étroite), désactivez le mode responsive : deux champs Largeur et Hauteur en pixels apparaissent. Une collection s’ouvre par défaut un peu plus grande (640 × 600 px) pour laisser la place à la navigation entre médias.
Conseil : gardez la largeur responsive sauf si votre maquette impose une dimension précise. C’est ce qui évite les bandes noires sur mobile et les débordements horizontaux.
Régler les options de lecture
La section Options & lecture dépend du type de média : une vidéo propose Lecture automatique, Boucle, Muet, les Contrôles ; une image propose le zoom et le plein écran ; un document PDF propose l’affichage des miniatures et du sommaire ; une collection propose la lecture automatique de la suivante. Ces mêmes réglages, au complet, se retrouvent dans l’onglet Développeur (voir plus bas).
À savoir : la Lecture automatique est bloquée par la plupart des navigateurs si le son est actif. Pour un démarrage fiable, activez Lecture automatique et Muet — c’est la combinaison qui fonctionne partout.
Appliquer un préréglage
Si votre espace ou votre organisation a créé des préréglages (une combinaison d’options et d’apparence enregistrée), ils apparaissent dans une rangée Presets en haut des options. Un clic applique le préréglage à toutes les options d’un coup — pratique pour garder la même présentation sur tous vos embeds. Voir Personnaliser l’apparence du lecteur et créer un préréglage.
Le lecteur en détail : la page produit Player récapitule ce que le lecteur embarque — formats, chapitres, sous-titres, interactivité — et les démos le montrent en fonctionnement.
Aller plus loin : l’onglet Développeur
Tout en bas de la fenêtre, la carte Options avancées indique « Tous les paramètres de personnalisation sur l’onglet Développeur » et ouvre l’onglet Développeur du média. Vous y trouvez l’intégralité des réglages du lecteur (chapitres, picture-in-picture, mode éco, démarrage à un instant précis…), un aperçu en direct, la gestion des préréglages et les identifiants techniques. Voir Régler finement un lecteur intégré pour le détail de cet onglet, et Personnaliser le lecteur vidéo pour l’apparence.
Attention au code périmé
Si vous copiez le code, puis modifiez une option ensuite, la carte du code passe en orange avec la mention Recopier le code modifié. C’est un garde-fou : ce qui est collé sur votre site ne reflète plus vos derniers réglages. Recliquez sur Copier le code pour récupérer la version à jour, et remplacez le code sur votre page.
À retenir : ne collez jamais un embed avant d’avoir vérifié qu’aucun indicateur orange n’est présent. 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.
Coller le code sur votre site
La méthode Script convient à tout site qui accepte les balises <script> ; sinon, basculez sur Iframe dans la fenêtre Intégrer.
- Page HTML maison : collez le code à l’endroit voulu dans le
<body>. - WordPress : ajoutez un bloc HTML personnalisé (éditeur Gutenberg) ou passez en mode Texte (éditeur classique), puis collez.
- Webflow / Squarespace : ajoutez un élément Embed (ou bloc Code) et collez le code.
- Wix : ajoutez un élément HTML personnalisé ; Wix bloque souvent les scripts externes, préférez donc la méthode Iframe.
- Notion : tapez
/embed, puis collez l’URL de la carte Lien (Notion n’accepte pas les<script>). - Wikis internes (Confluence, intranets) : préférez la méthode Iframe, la plupart filtrent le JavaScript.
Après avoir collé, testez la page finale : affichage au bon endroit, lecture (son, plein écran), et comportement en redimensionnant la fenêtre et sur mobile. Si le lecteur ne s’affiche pas, vérifiez la console du navigateur, un éventuel bloqueur, ou basculez sur la méthode Iframe.
Personnaliser et sécuriser vos embeds
- Pour changer le lecteur (couleurs, logo, options, préréglages) : Personnaliser le lecteur vidéo.
- Pour n’autoriser que votre site à afficher vos vidéos : Restreindre les domaines autorisés à intégrer vos vidéos.
- Pour intégrer une playlist entière : Intégrer une collection de vidéos sur votre site.
Régler les options du lecteur ou enregistrer un préréglage nécessite le rôle Éditeur sur l’espace ; la restriction par domaines se règle au niveau de l’espace et demande le rôle Admin.
Suivre les vues de vos vidéos intégrées
Les lectures de vos vidéos intégrées sont comptabilisées comme les autres : vous les retrouvez dans les statistiques de la vidéo (onglet Statistiques de la fiche du média) et dans l’application Statistiques. Il n’y a pas de tableau de bord réservé à un embed en particulier. Voir Consulter les statistiques d’une vidéo.
C’est différent d’un lien de partage, qui dispose, lui, de ses propres statistiques (ouvertures, vues, entonnoir e-mail) — voir Comment partager une vidéo par lien.
Partager ou Intégrer : quelle différence ?
Partager produit un lien vers une page hébergée par Videas ; Intégrer produit un bout de code à coller dans votre propre page, pour que le lecteur s’affiche chez vous sans que le visiteur quitte votre site.
Les conséquences ne s’arrêtent pas là. Un lien de partage a ses propres statistiques (ouvertures, entonnoir e-mail, révocation) et ses propres protections (mot de passe, expiration). Un embed, lui, compte ses lectures dans les statistiques de la vidéo et se protège par la restriction de domaines, pas par un mot de passe.
Script ou iframe : lequel choisir ?
Script par défaut : le lecteur se met à jour tout seul et se redimensionne avec son conteneur. C’est le choix pour un site HTML classique, WordPress, Webflow ou Squarespace.
Basculez sur Iframe quand votre plateforme filtre le JavaScript — c’est le cas de Wix, de Confluence et de la plupart des intranets et wikis internes. Le rendu est le même ; l’iframe est simplement figée aux dimensions déclarées. Cas particulier de Notion, qui n’accepte ni l’un ni l’autre : tapez /embed et collez l’URL de la carte Lien.
Pourquoi ma vidéo ne démarre-t-elle pas automatiquement ?
Parce que la plupart des navigateurs bloquent la lecture automatique avec le son. C’est une règle du navigateur, pas un réglage Videas : activer Lecture automatique seul ne suffit pas.
La combinaison qui fonctionne partout est Lecture automatique + Muet. Le visiteur réactive le son d’un clic s’il le souhaite — c’est le compromis retenu par toutes les plateformes vidéo pour cette raison.
Le code orange « Recopier le code modifié », qu’est-ce que ça veut dire ?
Que vous avez copié le code, puis modifié une option : ce qui est collé sur votre site ne reflète plus vos derniers réglages. La carte passe en orange comme garde-fou.
C’est le piège le plus courant de l’intégration vidéo — on règle ses options après avoir collé, et le rendu en ligne ne change pas. Recliquez sur Copier le code, puis remplacez le code sur votre page. Ne collez jamais un embed tant qu’un indicateur orange est présent.
Quand faut-il utiliser le mode Popover ?
Quand une page contient plusieurs vidéos. En mode Intégré, chaque lecteur se charge avec la page ; en mode Popover, rien n’est chargé tant que le visiteur ne clique pas sur le déclencheur — la vidéo s’ouvre alors en plein écran par-dessus la page.
Vous choisissez le déclencheur : un Bouton (avec son libellé, « Voir la vidéo » par défaut) ou une Vignette. Le lien Aperçu montre le rendu de la popup avant que vous copiiez le code.
Où voir les lectures d’une vidéo intégrée ?
Dans les statistiques de la vidéo — l’onglet Statistiques de sa fiche, ou l’application Statistiques. Les lectures venues d’un embed sont comptabilisées comme les autres, sans distinction.
Il n’existe pas de tableau de bord par embed. Si vous avez besoin de savoir sur quels sites vos vidéos sont regardées, c’est l’onglet Sources de trafic de vos statistiques qui répond, en listant les domaines et les URLs exactes.
En résumé
- Intégrer (distinct de Partager) fournit un code à coller sur votre propre site ; le visiteur n’a pas besoin de compte
- Méthode Script (recommandée, se met à jour et se redimensionne seule) ou Iframe (compatible partout, figée)
- Affichage Intégré ou Popover (chargement au clic, plein écran)
- Largeur responsive par défaut (100 % du conteneur) ou dimensions fixes en pixels
- Un indicateur orange Recopier le code modifié signale un code périmé — recopiez avant de coller
- Réglages complets, aperçu en direct et préréglages dans l’onglet Développeur
Articles liés
Les captures sont prises sur Videas Academy, une chaîne d'exemple créée pour ce centre d'aide. Elle appartient à un client fictif, pas à Videas : votre chaîne porte votre nom, votre identité et vos tarifs.