Développeurs

Intégrer une vidéo YouTube sur son site (responsive)

Intégrez une vidéo YouTube adaptée à tous les écrans : menu Partager, code responsive, temps de départ, mode confidentialité, WordPress et conseils de vitesse.

Par L’équipe Free Thumbnail Downloader 2 min de lecture
Image de couverture de l’article: Intégrer une vidéo YouTube sur son site (responsive)
Dans cet article
  1. La méthode rapide : le menu Partager
  2. La meilleure méthode : un code responsive
  3. Options utiles
  4. Mode confidentialité renforcée
  5. WordPress
  6. Garder la page rapide
  7. Trouver l’ID de la vidéo

L’intégration permet de regarder une vidéo YouTube sans quitter votre page. Le code fourni par YouTube fonctionne, mais sa taille fixe peut casser la mise en page sur mobile. Voici comment bien faire.

La méthode rapide : le menu Partager

  1. Sous la vidéo, cliquez sur Partager → Intégrer.
  2. Cochez éventuellement Commencer à pour un temps de départ.
  3. Copiez le code <iframe> et collez-le dans le HTML de votre page.

Le code par défaut utilise width="560" height="315", qui peut déborder sur petit écran.

La meilleure méthode : un code responsive

Cette version occupe toujours la largeur de son conteneur et garde le format 16:9 :

<iframe
  style="width:100%;aspect-ratio:16/9;border:0"
  src="https://www.youtube-nocookie.com/embed/ID_VIDEO"
  title="Lecteur vidéo YouTube"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Notre générateur de code d’intégration le crée pour n’importe quelle vidéo et ajoute des options en cochant des cases.

Options utiles

ParamètreEffet
start=90Démarre à 1:30
end=150S’arrête à 2:30
autoplay=1&mute=1Lecture automatique (forcément muette)
loop=1&playlist=ID_VIDEOLecture en boucle
controls=0Masque les commandes
cc_load_policy=1Affiche les sous-titres par défaut

Ajoutez-les après l’ID de la vidéo, en commençant par ? et en séparant par &, par exemple .../embed/ID_VIDEO?start=90&mute=1.

Mode confidentialité renforcée

Avec youtube-nocookie.com au lieu de youtube.com, YouTube n’enregistre pas d’informations sur vos visiteurs avant qu’ils lancent la vidéo. Un bon choix par défaut pour les blogs, en particulier en Europe.

WordPress

Dans l’éditeur de blocs, ajoutez un bloc HTML personnalisé et collez le code. Pour une intégration simple sans options, collez simplement le lien de la vidéo seul sur une ligne : WordPress crée le lecteur.

Garder la page rapide

Chaque lecteur intégré charge des scripts supplémentaires. Avec plusieurs vidéos sur une page :

  • Gardez loading="lazy" pour que les lecteurs ne se chargent qu’à l’approche du visiteur.
  • Pensez à afficher une miniature avec lien plutôt qu’un lecteur complet. Les URL de miniatures sont expliquées dans notre guide des URL de miniatures, et vous récupérez les images avec le téléchargeur de miniatures.

Trouver l’ID de la vidéo

L’ID, ce sont les 11 caractères après v= ou youtu.be/. Avec beaucoup de liens, l’extracteur d’ID les sort tous d’un coup.

Questions fréquentes

Pourquoi ma vidéo intégrée ne démarre-t-elle pas seule avec le son ?

Les navigateurs bloquent la lecture automatique avec le son. Elle ne marche que si la vidéo est muette : ajoutez mute=1 avec autoplay=1.

Peut-on intégrer n’importe quelle vidéo YouTube ?

La plupart des vidéos publiques, oui, mais l’auteur peut désactiver l’intégration. Le lecteur affiche alors un message et un lien vers YouTube.

Récupérez n’importe quelle miniature YouTube en quelques secondes

Collez un lien et téléchargez toutes les tailles disponibles, jusqu’à 1280×720.

Ouvrir le téléchargeur
L’équipe Free Thumbnail Downloader

Nous créons des outils simples et rapides pour les créateurs YouTube et rédigeons des guides basés sur nos propres tests.

À lire aussi