Intégration légère de YouTube et Vimeo : générateur de façade
Collez les liens des vidéos — vous obtenez un bloc prêt à l'emploi qui affiche un aperçu et ne charge le lecteur qu'après un clic. Zéro bibliothèque externe : tout le nécessaire se trouve dans le code généré.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo : vimeo.com/ID, player.vimeo.com/video/ID, privés vimeo.com/ID/HASH. L'horodatage ?t= / &start= est repris dans la façade.
Précisions facultatives séparées par une barre verticale : URL | Titre | URL de la vignette.
L:H ou L/H. Il alimente la propriété CSS aspect-ratio.
hqdefault existe pour n'importe quelle vidéo. maxresdefault n'existe que là où l'original a été mis en ligne en 720p ou plus — sinon l'image ne s'ouvrira tout simplement pas et le spectateur verra un rectangle vide.
aria-label du bouton et le title de l'iframe.
i.ytimg.com chez YouTube : seule l'API oEmbed la renvoie, et nous ne pouvons pas l'interroger — l'outil fonctionne sans réseau. Téléversez donc l'image dans la médiathèque du site et collez le lien. Sans lui, vous aurez un cache dégradé avec un bouton play.
Collez au moins un lien pour obtenir le code.
À coller dans le bloc Gutenberg « HTML personnalisé ». Le bloc contient <style> et <script> : si votre rôle n'a pas le droit unfiltered_html ou qu'un plugin de sécurité supprime les scripts, la façade affichera la vignette mais le clic restera sans effet.
Le code est assemblé dans votre navigateur. Ni le bloc généré ni l'aperçu lui-même n'effectuent la moindre requête externe — les images de i.ytimg.com sont affichées dans l'aperçu sous forme d'adresses et non chargées.
Une seule vidéo intégrée coûte plus d'un mégaoctet avant le premier clic
Un iframe YouTube standard charge environ 1,3 Mo en une vingtaine de requêtes vers sept domaines tiers — avant même que le visiteur n'ait décidé de regarder la vidéo. Sur une page comportant trois vidéos, c'est trois fois plus, et c'est presque toujours cela qui plombe les scores de vitesse sur mobile. La façade règle le problème sans détour : d'abord seule une image d'aperçu avec un bouton de lecture est affichée, et le vrai lecteur n'est inséré qu'au moment du clic. Avant le clic, la page pèse un ordre de grandeur de moins. Il existe une bibliothèque populaire pour cela, mais toutes les instructions conseillent de la charger depuis un CDN tiers — autrement dit de supprimer une requête externe pour en ajouter une autre. Ici, le code généré est entièrement autonome : styles et script se trouvent à l'intérieur du bloc. Un effet supplémentaire concerne la confidentialité. L'iframe standard dépose des cookies de suivi avant tout visionnage. Le domaine youtube-nocookie.com repousse cela au démarrage de la lecture, et la façade jusqu'au clic. Pour les sites destinés à un public européen, cela touche directement aux exigences de consentement aux cookies.