Intégrer une vidéo YouTube à son site sans le ralentir

Sur YouTube, le bouton Partager fournit un code d'intégration qu'il suffit de coller dans votre page : l'opération prend une minute. Ce code charge pourtant le lecteur complet de YouTube à chaque visite, que la vidéo soit regardée ou non, avec ses scripts et parfois ses traceurs. Pour intégrer une vidéo YouTube à votre site sans le ralentir, il faut régler quelques options et changer la façon dont le lecteur se charge.

Préparer la vidéo sur YouTube

Tout commence dans YouTube Studio, l'espace de gestion de votre chaîne, où quelques réglages méritent un contrôle avant toute intégration :

• la visibilité : une vidéo publique peut être trouvée sur YouTube ; une vidéo non répertoriée reste lisible sur votre site et par ceux qui ont le lien, sans apparaître dans les recherches de YouTube ;
• l'intégration : l'option qui autorise la lecture sur d'autres sites doit rester activée ;
• le titre et la description : ils disent ce que montre la vidéo et renvoient vers votre site ;
• la miniature : elle servira aussi d'image d'attente sur votre site, alors choisissez un plan net et lumineux ;
• les sous-titres : ceux que YouTube crée automatiquement peuvent contenir des erreurs, à corriger dans YouTube Studio.

Le choix du sujet et le tournage relèvent d'une autre étape, abordée dans l'article sur la vidéo de présentation.

Les options du code d'intégration

Dans la fenêtre d'intégration, YouTube propose quelques options à cocher : démarrer la lecture à un moment précis, afficher ou non les commandes du lecteur, activer le mode de confidentialité avancé. D'autres réglages s'ajoutent directement dans le code, comme limiter les suggestions de fin de lecture aux vidéos de votre propre chaîne ; votre prestataire sait les appliquer.

Le mode de confidentialité avancé

Ce mode charge la vidéo depuis une adresse distincte de celle de YouTube. Selon YouTube, il limite les informations recueillies sur les visiteurs qui ne lancent pas la lecture. Le lecteur se connecte malgré tout aux serveurs de Google dès son affichage, et la lecture peut entraîner le dépôt de traceurs : ce mode réduit la collecte, sans dispenser forcément de demander l'accord du visiteur.

Un lecteur qui ne se charge qu'au clic

Intégré tel quel, le lecteur alourdit la page dès son ouverture, y compris pour le visiteur qui ne lancera jamais la vidéo. La solution porte le nom de façade. À la place du lecteur, la page montre la miniature de la vidéo, enregistrée sur votre site et compressée comme vos photos, surmontée d'un bouton de lecture ; le clic déclenche le chargement du lecteur YouTube, qui démarre aussitôt.

Cette technique a trois avantages. La page s'affiche plus vite, surtout sur mobile ; rien ne part vers Google tant que le visiteur n'a rien demandé ; et l'image offre la place idéale pour un message sur les cookies. Les indicateurs de vitesse concernés sont expliqués dans l'article sur les Core Web Vitals, et le même principe vaut pour une carte, comme le montre l'article sur l'intégration de Google Maps.

Deux précautions complètent la façade. Réservez à la vidéo un emplacement aux bonnes proportions, en général celles d'un écran large, pour que le texte ne saute pas quand le lecteur apparaît. Si une page doit présenter plusieurs vidéos, affichez une rangée de miniatures qui chargent chacune leur lecteur au clic.

Le consentement du visiteur

Une fois chargé, le lecteur YouTube peut déposer des cookies et d'autres traceurs. La CNIL rappelle que ces traceurs, lorsqu'ils ne sont pas indispensables au fonctionnement du site, supposent l'accord préalable du visiteur. Les bases sont résumées dans l'article sur le RGPD et les cookies.

Avec une façade, une solution consiste à écrire sous la miniature que la vidéo est hébergée par YouTube et que sa lecture peut entraîner le dépôt de cookies, avec un lien vers votre politique de confidentialité. Le visiteur qui clique le fait alors en connaissance de cause. Mentionnez aussi la vidéo dans votre bandeau de cookies et dans cette politique ; cnil.fr précise ce qu'exige un consentement valable.

Placer la vidéo et l'entourer de texte

Une vidéo trouve sa place sur la page dont elle illustre le sujet : la visite de l'atelier sur la page de présentation, une démonstration sur la page du service concerné. Évitez la lecture automatique en haut de l'accueil, qui ralentit l'affichage et surprend le visiteur. Au-dessus du lecteur, une phrase dit ce que montre la vidéo et combien de temps elle dure : chacun sait ainsi s'il a le temps de la regarder.

Les informations importantes doivent aussi figurer en texte : une précision donnée seulement dans la vidéo, comme un prix, un horaire ou une condition, échappe à celui qui ne la lance pas. Un court résumé sous le lecteur sert les visiteurs pressés, les personnes sourdes ou malentendantes et les moteurs de recherche. Si la vidéo contient de la parole, demandez que les sous-titres s'affichent d'office, pour ceux qui regardent sans le son.

Une vidéo verticale, tournée pour les réseaux sociaux, s'affiche avec de larges bandes noires dans un cadre horizontal. Prévoyez un cadre adapté, ou tournez à l'horizontale ce qui est destiné au site.

Et si vous hébergiez le fichier vous-même ?

Un fichier vidéo placé sur votre propre hébergement évite les traceurs de YouTube, la publicité et les suggestions. Il demande en revanche une compression soignée et peut peser lourd sur l'hébergement : il convient surtout aux boucles courtes et muettes. Pour une vidéo de plusieurs minutes, YouTube reste plus simple, puisqu'il adapte la qualité à la connexion de chaque visiteur.

À vérifier sur vos pages

1. Repérez les pages de votre site qui contiennent une vidéo YouTube, et notez celles qui la chargent dès l'ouverture.
2. Demandez à votre prestataire de passer ces vidéos en façade, avec le message sur les cookies et le mode de confidentialité avancé.
3. Relisez les sous-titres dans YouTube Studio et ajoutez un résumé en texte sous chaque vidéo.
4. Pour un nouveau site, inscrivez la façade vidéo dans votre cahier des charges ; le configurateur de devis vous donnera ensuite une estimation du projet.