Comment rendre les vidéos YouTube responsives • Yoast

Lors de l’intégration d’une vidéo YouTube sur votre site Web, vous avez probablement découvert un problème mineur mais très ennuyeux : les intégrations YouTube ne sont pas nativement réactives. Cela signifie que lorsque vous visualisez votre page Web sur un appareil mobile par exemple, la vidéo ne se redimensionne pas correctement avec le reste des éléments de la page. Cela peut avoir un impact négatif sur la conception et la convivialité de votre site Web. Alors, pourquoi cela se produit-il et que pouvez-vous faire à ce sujet ?

Pourquoi les vidéos YouTube ne sont pas réactives

Les intégrations YouTube standard, telles que celle ci-dessous, utilisent des iFrames pour générer un lecteur vidéo intégré :

L’avantage d’utiliser des iFrames ? C’est un simple morceau de HTML. De plus, il permet aux intégrations YouTube d’être compatibles avec la plus large sélection possible de cas d’utilisation, d’applications et de systèmes de gestion de contenu. YouTube peut également mettre à jour les intégrations vidéo existantes avec, par exemple, de nouveaux styles de lecteur ou des scripts publicitaires côté serveur sans obliger les utilisateurs à modifier le code sur leurs sites Web. Cela fonctionne car un iFrame agit essentiellement comme une fenêtre vers une page différente.

Mais il y a aussi un inconvénient. L’utilisation d’iFrames peut ralentir le chargement des vidéos YouTube sur une page donnée. Cela peut également signifier que les vidéos ne sont pas toujours visibles lors de la première peinture, car un navigateur doit trouver et charger l’iFrame avant de pouvoir charger la vidéo. Enfin, et plus frustrant, sans CSS ni Javascript, il n’existe aucun moyen natif d’adapter les vidéos YouTube à un conteneur. C’est pourquoi l’intégration spécifie une taille (560 x 315 par défaut).

Par conséquent, pour rendre une intégration YouTube vraiment réactive et optimisée pour l’affichage mobile, vous devez faire un peu de travail supplémentaire. Heureusement, il existe plusieurs règles simples pour y arriver.

Méthode 1 : Avec un peu de CSS personnalisé

La façon la plus simple d’utiliser CSS pour créer des intégrations réactives est de créer une classe qui comporte la propriété « aspect-ratio ». Cette propriété vous permet de stipuler le rapport d’aspect de la classe que vous créez, de sorte qu’elle soit toujours redimensionnée dans un conteneur selon ce rapport d’aspect. Étant donné que les vidéos YouTube intégrables sont toutes présentées avec un rapport d’aspect de 16 × 9, cela signifie que vous pouvez utiliser la propriété pour vous assurer que tout est mis à l’échelle en conséquence.

Regardons comment la première méthode fonctionne.

Tout d’abord, créez une classe telle que « youtube-video ». Ensuite, donnez-lui le rapport d’aspect de la propriété défini sur 16/9 avec la largeur à 100%.

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Vous devrez ensuite appliquer cette classe à toute intégration YouTube dans le code, tout en supprimant la stipulation de largeur et de hauteur par défaut.

<iframe class="youtube-video" src="https://www.youtube.com/embed/5kW0RtcJZC8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Cette méthode est très simple pour quiconque est à l’aise avec l’édition CSS et HTML de base. Cependant, cela nécessite un peu de travail pour chaque intégration YouTube individuelle. C’est loin d’être idéal, en particulier pour les sites Web avec plusieurs auteurs et éditeurs qui essaient probablement tous d’intégrer des vidéos YouTube dans des pages et des publications.

Méthode 2 : Avec des blocs Gutenberg dans des thèmes réactifs

Certains thèmes WordPress, tels que Inspiro et sensible, disposent de fonctionnalités qui automatisent la réactivité pour les intégrations vidéo. Donc, si vous êtes prêt à changer de thème et de modèles, il vous suffit d’en installer un. Ces thèmes ont une règle CSS similaire à la première méthode qui est intégrée au thème. Cette règle sera ensuite appliquée à certains blocs et présentée dans le thème.

En d’autres termes : si vous utilisez le bloc « vidéo » Gutenberg, où vous collez l’URL de la vidéo YouTube que vous souhaitez intégrer, vos vidéos resteront réactives.

Cependant, assurez-vous de tester d’abord ces thèmes avec votre site Web. La mise en œuvre spécifique peut ne pas fonctionner parfaitement avec vos vidéos.

Méthode 3 : Avec le plugin Yoast Video SEO

Si vous êtes un utilisateur de WordPress, le moyen le plus simple et le plus rapide de résoudre ce problème consiste à utiliser le plugin Yoast Video SEO. En plus d’automatiser l’inclusion de métadonnées, ce qui permet de classer vos vidéos dans les résultats de recherche Google, JavaScript redimensionne automatiquement l’intégration de la vidéo pour n’importe quel appareil et taille de navigateur. Au-delà de la taille du conteneur, la vidéo ajustera sa hauteur et sa largeur au fur et à mesure que la page évolue. Vous n’avez donc pas à vous soucier de la mise en œuvre de CSS personnalisés ou de tests de navigateur fastidieux !

De plus, le plugin Yoast Video SEO utilise JavaScript asynchrone pour accélérer au maximum les temps de chargement des vidéos YouTube. Cela garantit que vos vidéos sont diffusées de la meilleure façon possible pour garantir des taux de lecture et un engagement élevés. Le plugin coûte 79 $ par an, ne prend que quelques minutes à installer et à configurer, et garantit que vous n’aurez plus jamais à vous soucier des vidéos réactives.

Sommaire

Les vidéos sont un excellent outil à utiliser sur votre site Web. Les gens les aiment! Mais s’ils ne s’adaptent pas au reste de votre site, ils peuvent sembler maladroits. Heureusement, il existe plusieurs façons de s’assurer que vos vidéos intégrées sont réactives. Soit avec un peu de CSS personnalisé, soit en installant un plugin utile comme Yoast Video SEO, vous pouvez vous assurer que vos vidéos YouTube se redimensionnent correctement. Vous pouvez également opter pour changer votre thème en un thème qui a une réactivité vidéo automatique. Si vous avez d’autres questions ou suggestions, veuillez les laisser dans les commentaires.

Lire la suite : YouTube vs votre propre site : quel est le meilleur pour le référencement vidéo ? »