Vidéo intégrée avec chargement au clic

Ce que fait une intégration ordinaire avant que quelqu’un regarde

Le code copié dans le menu Partager d’une vidéo est un <iframe>, une petite fenêtre sur un autre site web placée dans votre page. Le navigateur remplit cette fenêtre dès qu’il dessine la page. Pour une seule vidéo YouTube, cela représente environ vingt requêtes et plusieurs centaines de kilo-octets de script, chargés depuis les serveurs de Google pour chaque visiteur, y compris tous ceux qui font défiler la page sans s’arrêter.

Chacune de ces requêtes transporte l’adresse IP du visiteur et l’adresse de votre page. Le lecteur peut aussi lire et écrire dans son propre espace de stockage du navigateur. Votre page devient donc plus lente et vos visiteurs se font remarquer par une entreprise qu’ils n’ont jamais choisi de contacter.

Les deux sortes de code que cet outil écrit

Chargement au clic

Votre page reçoit un lien déguisé en cadre vidéo, avec une image d’affiche, un triangle de lecture et une étiquette accessible. Un court script, inclus une seule fois, attend un clic sur ce lien puis remplace seulement alors le lien par le vrai lecteur avec autoplay=1, de sorte qu’un seul appui suffit sur la plupart des appareils. Si le script est absent ou bloqué, le lien fonctionne quand même et ouvre la vidéo sur la plateforme dans un nouvel onglet.

Iframe simple sur le domaine renforçant la confidentialité

Aucun script. Le lecteur se charge avec la page, mais depuis youtube-nocookie.com, ou depuis Vimeo avec dnt=1 et avec loading="lazy" pour qu’une vidéo placée loin dans la page attende que le visiteur s’en approche.

Dans les deux cas, le lecteur est placé dans une boîte dimensionnée avec la propriété CSS aspect-ratio, ce qui lui permet de s’adapter à la colonne où vous le mettez. Un lien /shorts/ est détecté et reçoit une boîte 9:16 limitée à 360 pixels de large.

L’image d’affiche est la dernière fuite

Pour YouTube, le code à chargement au clic pointe par défaut vers la miniature de la vidéo sur i.ytimg.com. Ce serveur appartient à Google. Il ne dépose aucun témoin, mais il voit bien l’adresse IP du visiteur quand l’image se charge. Pour descendre à zéro requête vers un tiers, enregistrez une image de la vidéo, téléversez-la sur votre propre site puis collez son adresse dans le champ de l’affiche. Utilisez une adresse en https://, parce que les navigateurs refusent les images non sécurisées sur les pages sécurisées.

Vimeo n’a pas d’adresse de miniature prévisible, donc l’affiche par défaut est un cadre sombre qui affiche votre titre. Le même champ d’affiche le remplace par une image.

Coller le code dans votre site

Le résultat est du HTML simple avec des styles en ligne, donc il ne dépend pas de votre thème.

• WordPress : ajoutez un bloc « HTML personnalisé » et collez. Les administrateurs peuvent enregistrer la partie <script>, mais les comptes ayant le rôle d’éditeur sur un réseau multisite peuvent la voir supprimée à l’enregistrement. Dans ce cas, l’affiche renvoie quand même vers la vidéo, ou vous pouvez passer à l’iframe simple.
• Squarespace, Wix, Webflow, Shopify : utilisez le bloc de code ou d’intégration, pas le bloc vidéo intégré, qui ramènerait aussitôt le lecteur standard.
• HTML statique : collez le code à l’endroit où la vidéo doit apparaître. Avec plusieurs vidéos sur une même page, collez chaque extrait en entier. Le script vérifie s’il a déjà été exécuté.
• Content-Security-Policy : autorisez www.youtube-nocookie.com ou player.vimeo.com dans frame-src. Une politique qui interdit les scripts en ligne bloquera le script de chargement au clic, alors déplacez-le dans un fichier que vous servez vous-même.

Remplissez toujours le champ du titre. Il devient le title de l’iframe et l’étiquette du lien de lecture et c’est ce qu’annonce un lecteur d’écran. Si vous le laissez vide, l’auditeur n’entend que « Vidéo YouTube ».