Comment afficher une vidéo YouTube sur son site sans ralentir la vitesse

Comment insérer une vidéo YouTube sans perdre de la vitesse du site

Vidéo explicative | Langue : Français | Durée : 7 min 33 sec

Description du problème : quand une vidéo YouTube ralentit la page

Les appels d’une vidéo insérée dans une page (embeded video) vers YouTube sont nombreux et très souvent lourd en poids.

Voici un exemple d’une page qui ne contient que le code <iframe> d’une vidéo YouTube; à droite, on peut distinguer pas moins de 65 différentes requêtes / réponses faites par le navigateur vers / de YouTube, Google fonts, etc.

C’est le cas par exemple des vidéos insérées sur les pages produits de sites e-commerce comme Shopify ou WooCommerce. Voir cet audit SEO ↳ d’un site e-commerce Shopify en 5 vidéos / 153 minutes (contenu payant ℹ️).

Cela va sans dire… c’est lourd et lent 🐌 .

Exemple des requêtes faites d'une seule vidéo YouTube sur une page web ce qui rend la page moins rapide.
Exemple des requêtes d’une seule vidéo YouTube sur une page

Solution : afficher et charger une image + le child-src

Le principe c’est de demander la page avec un minimum de requêtes du/vers le serveur YouTube (ou autre). Et donc on « charge » l’image d’abord avec le petit bouton triangle « play », et ce n’est qu’une fois cliqué que l’appel vers YouTube se déclenche et fait place à la vidéo même.

Le child-src facilite la tâche quand on a une Content Security Policy (CSP) pour définir les sources valides ↳.

Il existe différentes techniques, mais le principe est le même : afficher une image pertinente avant la vidéo même. L’avantage, on gagne en vitesse et réactivité sur la page; le désavantage, on demande à l’utilisateur de cliquer 2 fois avant de visionner la vidéo. À vous de choisir. Vous pouvez allez à la minute 05min et 16sec dans la vidéo ci-dessus pour voir le comportement exact de l’utilisateur sur cet exemple concret.

Code exemple vidéo YouTube insérée en iFrame

  • « width » / « height » à ajuster à volonté
  • suivre les étapes dans la vidéo
<iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture allowfullscreen title="vidéo à propos de S3 "></iframe>

Le code pourrait être facilement insérer dans un WordPress, Shopify, etc. Il faut tester surtout au niveau de l’ergonomie mobile de la page après avoir insérer la vidéo (padding, position, etc) et voir ce qui marche le mieux pour la page en format mobile 🚀. S’assurer d’abord que la page est mobile-friendly (voir la relation ergonomie mobile dans la GSC et fichier robots.txt ↳ contenu libre).

    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>

Puisqu’on utilise class « resp-iframe » pour <iframe>, ce petit style pourrait ajuster l’ergonomie mobile et rendre la vidéo responsive.

HTML complet de la page

<!DOCTYPE html>
<html lang="fr" ontouchmove>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>
    <iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="vidéo à propos de S3 "></iframe>
    </div>
</body>
</html>

Rendre la vidéo YouTube intégrée 📱 responsive

Nous avons donné le nom de « resp-iframe » à la « class » mais vous pouvez lui donner un autre nom de votre préférence. La partie « intéressante » pour s’assurer que la vidéo est responsive c’est la suivante : (à mettre dans un widget sous WordPress, ou direct section HTML, ou dans la description de produit sur Shopify, etc).

    <div>
    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>
    <iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="vidéo à propos de S3 "></iframe>
    </div>

Résultat, nous avons intégré une vidéo responsive en HTML sans perdre de la vitesse de chargement de la page. Une fois l’utilisateur clique sur l’image, la page commence à afficher les éléments YouTube et votre utilisateur visionne la vidéo. Nous avons allégé les requêtes initiales et rendu l’expérience utilisateur plus agréable.

Laisser un commentaire