Vidéos YouTube en HTML
Apprenez à intégrer des vidéos YouTube avec l'élément <iframe> : URL d'intégration, taille responsive, attribut allow, autoplay, boucle et mode confidentialité.
Héberger et diffuser vos propres vidéos est complexe : vous devez encoder plusieurs formats pour que chaque navigateur puisse les lire, stocker des fichiers volumineux et payer la bande passante. L'approche plus simple consiste à laisser YouTube s'en charger et à intégrer son lecteur sur votre page grâce à un élément <iframe>. Le navigateur charge le lecteur YouTube dans le cadre, ce qui vous offre gratuitement le streaming adaptatif, les sous-titres et le plein écran avec quelques lignes de HTML.
Cette page explique comment construire l'URL d'intégration, rendre le lecteur responsive, configurer les permissions avec l'attribut allow, et passer des paramètres de lecture comme l'autoplay, la boucle et les contrôles.
Trouver l'ID de la vidéo et l'URL d'intégration
L'erreur la plus fréquente consiste à placer l'URL de visionnage dans le src. L'adresse que vous voyez dans le navigateur lorsque vous regardez une vidéo sur YouTube est une URL de visionnage et elle ne peut pas être intégrée directement :
https://www.youtube.com/watch?v=i8n1gSw_o_8La partie après v= est l'ID de la vidéo (i8n1gSw_o_8 dans l'exemple). Pour l'intégration, vous avez besoin de l'URL d'intégration, qui utilise le chemin /embed/ suivi de cet ID :
https://www.youtube.com/embed/i8n1gSw_o_8Pour trouver l'ID : ouvrez la vidéo sur YouTube, copiez la valeur du paramètre de requête v dans la barre d'adresse (ou utilisez l'option Partager → Intégrer, qui vous donne l'URL /embed/ complète et le balisage <iframe>). Les liens de partage raccourcis tels que https://youtu.be/i8n1gSw_o_8 exposent également l'ID comme dernier segment du chemin.
Lire une vidéo YouTube en HTML
Pour intégrer une vidéo, faites pointer le src de l'iframe vers l'URL d'intégration et définissez ses dimensions :
- Notez l'ID de la vidéo (voir ci-dessus).
- Ajoutez un élément
<iframe>à votre page. - Définissez l'attribut
srcsur l'URL d'intégration :https://www.youtube.com/embed/VIDEO_ID. - Définissez
widthetheight(ou dimensionnez-le avec CSS — voir Intégrations responsives). - Ajoutez un attribut
titledécrivant la vidéo pour l'accessibilité. - Ajoutez des paramètres URL pour personnaliser la lecture (par exemple,
?rel=0pour limiter les vidéos recommandées après la lecture à la même chaîne).
Exemple d'intégration d'une vidéo YouTube en HTML avec l'élément <iframe> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Mode confidentialité améliorée (youtube-nocookie.com)
Une intégration YouTube standard peut déposer des cookies de suivi dès le chargement de la page — avant même que le visiteur appuie sur lecture. En vertu du RGPD et de réglementations similaires, cela peut nécessiter un consentement explicite. YouTube propose un mode confidentialité améliorée qui retarde le stockage des cookies d'identification personnelle jusqu'à ce que le visiteur commence effectivement à regarder la vidéo. Pour l'utiliser, remplacez le domaine par youtube-nocookie.com :
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>Tout le reste — le chemin /embed/, l'ID de la vidéo et tous les paramètres URL — fonctionne exactement de la même manière. Notez que cela réduit, mais n'élimine pas entièrement, les données que le lecteur peut envoyer ; vérifiez donc votre politique de consentement si vous avez des exigences strictes.
L'attribut allow
Les navigateurs limitent les fonctionnalités puissantes via la Permissions Policy. Pour qu'un iframe YouTube puisse utiliser l'autoplay, le plein écran et d'autres fonctionnalités, la page parente doit les accorder via l'attribut allow de l'iframe. L'attribut prend une liste de jetons de permission séparés par des points-virgules. L'ensemble que génère la boîte de dialogue Partager → Intégrer de YouTube est :
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>Jetons courants et leurs fonctions :
| Jeton | Rôle |
|---|---|
accelerometer | Permet au lecteur de lire le mouvement de l'appareil (utilisé par certaines vidéos 360°/VR). |
autoplay | Permet à la vidéo de démarrer sans interaction de l'utilisateur. |
clipboard-write | Permet au lecteur de copier du texte (par exemple, des liens de partage) dans le presse-papiers. |
encrypted-media | Active la lecture protégée par DRM via les Encrypted Media Extensions. |
gyroscope | Permet au lecteur de lire l'orientation de l'appareil (vidéos 360°/VR). |
picture-in-picture | Permet à la vidéo de s'afficher dans une fenêtre flottante. |
web-share | Permet au lecteur d'ouvrir la boîte de dialogue de partage natif. |
L'attribut séparé allowfullscreen autorise le bouton plein écran. Vous pouvez omettre les jetons dont vous n'avez pas besoin ; omettre autoplay, par exemple, bloquera simplement l'autoplay.
Intégrations YouTube responsives
Un iframe avec width/height fixes ne s'adaptera pas aux petits écrans et risque de déborder de son conteneur. Deux techniques fiables permettent au lecteur de s'adapter à son parent tout en conservant les proportions 16:9 de la vidéo.
Avec la propriété CSS aspect-ratio (navigateurs modernes)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.video {
width: 100%;
max-width: 720px;
}
.video iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div class="video">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>
</body>
</html>Avec l'astuce du padding-bottom (large compatibilité)
Pour les navigateurs plus anciens ne supportant pas aspect-ratio, enveloppez l'iframe dans un conteneur dont la hauteur est créée par padding-bottom: 56.25% (soit 9 ÷ 16, le rapport 16:9), puis étirez l'iframe pour qu'il le remplisse en position absolue :
<style>
.video-wrap {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="video-wrap">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>Personnaliser la lecture avec des paramètres URL
Vous configurez le lecteur en ajoutant des paramètres de requête à l'URL d'intégration. Le premier paramètre est introduit avec un ?, et chaque paramètre supplémentaire est joint avec & :
https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0La plupart des paramètres acceptent une valeur de 0 (désactivé) ou 1 (activé). Les sections ci-dessous couvrent ceux que vous utiliserez le plus souvent.
Autoplay YouTube
Pour démarrer la vidéo automatiquement au chargement du lecteur, ajoutez autoplay=1 (la valeur par défaut, autoplay=0, attend que l'utilisateur appuie sur lecture).
Important : les navigateurs bloquent l'autoplay avec le son. Une vidéo en autoplay doit également être mise en sourdine, donc associez autoplay=1 à mute=1 — sinon la vidéo ne démarrera pas. L'iframe doit également bénéficier de la permission autoplay dans son attribut allow.
Exemple d'autoplay YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Contrôles YouTube
Le paramètre controls affiche ou masque la barre de contrôle du lecteur (lecture/pause, volume, plein écran, etc.). Utilisez controls=0 pour la masquer et controls=1 (la valeur par défaut) pour l'afficher.
Exemple de contrôles YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Boucle YouTube
Utilisez loop=1 pour que la vidéo se répète indéfiniment (la valeur par défaut, loop=0, la lit une seule fois). Il y a un piège : pour une seule vidéo, la boucle ne fonctionne que si vous passez également playlist avec le même ID de vidéo. YouTube traite une boucle comme « revenir au début de la playlist », donc sans cette entrée de playlist la vidéo s'arrête après une lecture. L'exemple ci-dessous définit les deux :
Exemple de boucle YouTube :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Héritage : les balises <embed> et <object>
Vous pouvez encore tomber sur d'anciens tutoriels qui intègrent YouTube avec les éléments <embed> ou <object>. N'utilisez pas ces méthodes pour YouTube — la méthode moderne et prise en charge est l'<iframe> présentée ci-dessus. Les exemples ci-dessous sont conservés uniquement pour vous permettre de reconnaître ce modèle hérité :
<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>Sujets connexes
- Balise HTML
<iframe>— l'élément utilisé pour chaque intégration YouTube. - Balise HTML
<video>— pour diffuser vos propres fichiers vidéo au lieu d'intégrer YouTube. - Audio et vidéo en HTML5 — une vue d'ensemble des médias natifs en HTML.