Comment intégrer une vidéo IA dans un site web

Publié le 10 novembre 2026

Un ordinateur portable montrant un logiciel de montage vidéo en extérieur.

Une vidéo créée par une intelligence artificielle reste un fichier. C’est la page web qui doit l’afficher, grâce à un lecteur. Reste à savoir quel format choisir et quel code écrire pour qu’elle se lance chez tous les visiteurs.

Dans cet article, nous allons voir pas à pas comment l’intégrer à un site, avec la balise video ou une iframe.

Qu’est-ce qu’une vidéo IA intégrée à une page web ?

Une vidéo IA est un fichier créé par un outil d’intelligence artificielle. La page web ne la fabrique pas : elle l’affiche avec un lecteur.

Pour la publier, téléchargez le fichier depuis l’outil, puis hébergez-le ou intégrez le lecteur d’un service externe. Un fichier MP4 avec image en H.264 et son en AAC, deux codes de compression, est lu par les principaux navigateurs.

Vérifier le format avant de choisir l’outil

Synthesia exporte en MP4 Full HD, soit 1 920 × 1 080 pixels. Le forfait gratuit, limité à 10 minutes de création par mois, ne donne pas ce téléchargement : il faut un forfait payant. Pour comparer les prix et les tarifs, voyez l’avis complet sur Synthesia.

Balise video ou iframe : lequel vous faut-il ?

Vidéo hébergée sur votre site

Si la vidéo est hébergée sur votre site, utilisez la balise <video>. Ajoutez controls pour que le visiteur puisse lancer, arrêter et régler le son.

Déclarez une balise <source> par format, avec son type. Le navigateur prend la première qu’il sait lire.

MP4 avec H.264 et AAC reste le plus compatible. Pour choisir l’outil qui crée la vidéo, voyez comparaison de Kling AI avec SORA et VEO3.

Vidéo hébergée chez un service externe

YouTube et Vimeo fournissent tous deux un code à copier, mais leurs adresses diffèrent sur quelques points.

Critère	YouTube	Vimeo
Où copier le code	Options de partage de la vidéo	Options de partage de la vidéo
Adresse du lecteur	Dans le code copié	Domaine `player.vimeo.com`
Taille minimale du lecteur	200 × 200 pixels	Vérifiez les dimensions du code copié

Titre et chargement différé de l’iframe

Ajoutez title="Vidéo de présentation du produit" à votre iframe. Ce titre décrit la vidéo aux lecteurs d’écran.

Si l’iframe se trouve hors de l’écran au chargement de la page, ajoutez loading="lazy". Elle ne se chargera qu’à l’approche du visiteur.

Preload, autoplay et lazy loading : ne pas confondre

Ce que préload et loading contrôlent

preload règle ce que le navigateur charge avant le clic : none ne charge rien, metadata seulement la durée. Il peut faire autrement, et sa valeur par défaut varie selon le navigateur.

loading="lazy" agit avant preload : il retarde la vidéo hors écran, image d’aperçu comprise, jusqu’à ce que le visiteur approche. Pour une vidéo publiée sur YouTube, voyez les conseils pour se référencer sur YouTube.

Ce que l’autoplay exige

Un navigateur ne lance une vidéo sans clic que dans ces cas :

Chrome laisse toujours lire une vidéo automatiquement, tant qu’elle est sans son.
Pour lancer une vidéo avec son, le visiteur doit d’abord interagir avec le site. Chrome applique aussi d’autres conditions, liées à la façon dont le visiteur utilise ce navigateur.
Firefox bloque par défaut la lecture automatique avec son. Le visiteur peut changer ce réglage dans les paramètres de Firefox.
Sur iPhone, ajoutez muted et playsinline. Sans playsinline, la vidéo s’ouvre en plein écran au lieu de rester dans la page.

Ne comptez pas sur le son

Une vidéo qui démarre seule avec son peut ne pas démarrer du tout, selon le navigateur et les réglages du visiteur. Ajoutez l’attribut controls pour que le visiteur puisse la lancer lui-même, avec son bouton de lecture.

Ce que la balise video ne fait pas

La balise <video> ne crée aucun sous-titre. Pour en avoir, ajoutez une piste <track> qui pointe vers un fichier WebVTT, avec kind="captions", src, srclang et label. Sans ce fichier, un visiteur sourd ou malentendant ne voit aucun texte.

Ces réglages font échouer la lecture ou l’indexation :

Sur Apache, associez video/mp4 aux MP4 et video/webm aux WebM.
Avec AV1, prévoyez une autre source pour anciens appareils Apple.
Une règle Disallow: /videos/ dans robots.txt empêche Google d’explorer le dossier.

Sans lien de secours

Si le navigateur ne prend pas en charge la balise, le visiteur voit un espace vide. Ajoutez donc un lien vers le fichier MP4 à l’intérieur de la balise, puis testez la page dans plusieurs navigateurs avant publication.

Comment intégrer une vidéo IA dans une page HTML ?

Exportez la vidéo en MP4 et tirez-en une image pour l’aperçu. Placez le fichier à une adresse fixe, accessible aux robots de Google, pour qu’il puisse être indexé. Pour choisir l’outil d’export, voyez le comparatif Synthesia et Heygen.

Dans la balise video, ajoutez ces attributs :

width et height : la largeur et la hauteur en pixels, par exemple 640 et 360, pour réserver la place avant le chargement.
poster : l’image d’aperçu affichée avant la lecture.
preload="none" : rien ne se télécharge avant le clic.

Sous-titres, test

Ajoutez les sous-titres

Placez la balise <track> sous <video>. Le menu affiche Français.
Écrivez le texte de secours

Entre <video> et </video>, une phrase de secours.
Ouvrez Réseau dans Chrome

Rechargez, lancez la vidéo : le fichier se charge.

Chargement, accessibilité et référencement de la vidéo

Sans le son, le visiteur ne peut pas suivre les paroles. Ajoutez une piste de sous-titres WebVTT, reliée par la balise <track>. Si une alarme ou une musique compte pour comprendre, décrivez-la aussi dans cette piste.

Placez la vidéo près d’un texte qui explique son sujet, sur une page indexée. Elle doit être intégrée à une page de lecture.

Pour les résultats enrichis, ajoutez des données structurées VideoObject avec name, thumbnailUrl et uploadDate. Gardez une URL stable pour la miniature.

Contrôles

Vérifiez preload="none" et loading="lazy" sur la vidéo basse.
Pesez le MP4 : débit et résolution changent son poids.
Vérifiez que robots.txt n’interdit pas la page.
Vérifiez name, thumbnailUrl et uploadDate dans VideoObject.
Gardez une miniature à URL stable.

Retenez l’essentiel : la page ne fabrique pas la vidéo, elle l’affiche avec un lecteur. Un fichier MP4, une balise video ou une iframe, des sous-titres et une image d’aperçu suffisent pour la publier.

Votre prochain pas : exportez la vidéo en MP4, puis testez la page dans plusieurs navigateurs avant de la mettre en ligne.

Foire aux questions

Peut-on intégrer une vidéo créée avec Synthesia ou HeyGen directement dans une page ?

Oui. Téléchargez le MP4 depuis Synthesia ou HeyGen, puis placez-le avec la balise <video>. Vous pouvez aussi coller le lecteur externe que fournit le service pour l’intégrer à la page.

Faut-il un hébergement spécial pour afficher une vidéo IA sur son site ?

Non, pas besoin d’hébergement spécial. Le fichier doit avoir une adresse accessible et être servi avec le bon type, c’est-à-dire le code qui annonce au navigateur son format (video/mp4 pour un MP4).

Ouvrez l’adresse du fichier : s’il se lance dans le navigateur, il est bien servi.

Quel poids maximum pour une vidéo sur une page web ?

Il n’existe pas de poids maximum unique pour une vidéo sur une page web. Le poids dépend surtout de la durée et de la qualité de l’image.

Compressez donc le fichier MP4, et évitez qu’il se charge avant le clic du visiteur.

La lecture automatique d’une vidéo avec son est-elle possible ?

Elle est possible, mais elle peut être bloquée : le navigateur ou les réglages du visiteur l’empêchent parfois. Prévoyez donc un bouton de lecture, grâce à l’attribut controls, et ne comptez pas sur une vidéo qui démarre seule avec son.