Comment intégrer une vidéo YouTube réactive dans le site Web
Mettre des vidéos YouTube sur des sites Web est courant de nos jours. YouTube fournit un code iframe pour intégrer la vidéo sur des sites Web. Cependant, la vidéo rendue via ce code iframe n’est pas réactive. Cela signifie que sur les petits appareils comme les mobiles, les tablettes, votre vidéo peut ne pas être belle.
En fait, vos vidéos YouTube intégrées doivent être réactives pour une meilleure expérience utilisateur. Dans cet article, nous étudions comment intégrer des vidéos YouTube responsives sur votre site Web.
J’ai trouvé 3 façons possibles d’atteindre notre résultat final. Voyons-le un par un.
Intégrer une vidéo YouTube réactive à l’aide de Bootstrap
Bootstrap est l’outil frontal le plus populaire qui aide à développer des sites réactifs. Il fournit également une solution simple pour rendre votre vidéo YouTube réactive.
Pour commencer, vous devez d’abord inclure le fichier CSS de Bootstrap comme suit. Si vous utilisez déjà Bootstrap dans votre projet, ignorez cette étape.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Ensuite, utilisez le code HTML suivant pour intégrer votre vidéo à l’aide d’un Bootstrap.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Remplacez l’espace réservé VIDEO_ID par l’ID vidéo réel. Essayez-le et vous devriez voir que votre vidéo fonctionne correctement sur des appareils plus petits.
Vous pouvez en savoir plus sur cette méthode d’intégration dans la documentation Bootstrap.
Vidéo YouTube réactive à l’aide de Fancybox
Cette option est un peu différente. Ici, au lieu d’afficher directement la vidéo, nous affichons une vignette de la vidéo YouTube. Et puis en cliquant sur une vignette, votre vidéo commencera à jouer dans la fenêtre contextuelle. Cela peut être fait en utilisant une fantaisie.
Pour utiliser Fancybox, vous devez inclure les fichiers CSS et JS suivants sur votre site Web.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>Après cela, placez le code ci-dessous et vous avez terminé.
<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
<img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>Intégrer YouTube Lite
Dans la première méthode, nous avons utilisé du code iframe. Lors de l’utilisation d’un iframe, le navigateur doit télécharger près de 800 Ko de données pour restituer une vidéo.
En utilisant fancybox, vous pouvez réduire cette charge. Mais encore une fois, vous devez inclure leurs CSS et JS. L’ajout de ces fichiers via CDN est recommandé pour libérer la charge du serveur.
En travaillant sur ce sujet, je suis tombé sur un article qui explique l’intégration de vidéos YouTube d’une manière différente. Il n’a pas besoin d’utiliser d’iframe lors du chargement de la page ni d’inclure des fichiers.
L’article fournit du code que n’importe qui peut facilement ajouter à son application. Veuillez suivre l’article Lite YouTube Embeds et ajouter le code comme suggéré.
Ce sont les 3 façons possibles d’intégrer une vidéo YouTube responsive. Selon vos besoins, vous pouvez choisir l’une des solutions.
Articles Liés
- Comment obtenir la liste des vidéos YouTube de votre chaîne
- Comment utiliser l’API YouTube pour télécharger une vidéo sur la chaîne YouTube
- Comment obtenir des balises vidéo YouTube à l’aide de l’API YouTube