{"id":26071,"date":"2021-06-19T17:57:00","date_gmt":"2021-06-19T14:57:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26071"},"modified":"2021-10-18T02:03:01","modified_gmt":"2021-10-17T23:03:01","slug":"comment-integrer-une-video-youtube-reactive-dans-le-site-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-integrer-une-video-youtube-reactive-dans-le-site-web\/","title":{"rendered":"Comment int\u00e9grer une vid\u00e9o YouTube r\u00e9active dans le site Web"},"content":{"rendered":"

Mettre des vid\u00e9os YouTube sur des sites Web est courant de nos jours. YouTube fournit un code iframe pour int\u00e9grer la vid\u00e9o sur des sites Web. Cependant, la vid\u00e9o rendue via ce code iframe n’est pas r\u00e9active. Cela signifie que sur les petits appareils comme les mobiles, les tablettes, votre vid\u00e9o peut ne pas \u00eatre belle.<\/p>\n

En fait, vos vid\u00e9os YouTube int\u00e9gr\u00e9es doivent \u00eatre r\u00e9actives pour une meilleure exp\u00e9rience utilisateur. Dans cet article, nous \u00e9tudions comment int\u00e9grer des vid\u00e9os YouTube responsives sur votre site Web.<\/p>\n

J’ai trouv\u00e9 3 fa\u00e7ons possibles d’atteindre notre r\u00e9sultat final. Voyons-le un par un.<\/p>\n

Int\u00e9grer une vid\u00e9o YouTube r\u00e9active \u00e0 l’aide de Bootstrap<\/h3>\n

Bootstrap est l’outil frontal le plus populaire qui aide \u00e0 d\u00e9velopper des sites r\u00e9actifs. Il fournit \u00e9galement une solution simple pour rendre votre vid\u00e9o YouTube r\u00e9active.<\/p>\n

Pour commencer, vous devez d’abord inclure le fichier CSS de Bootstrap comme suit. Si vous utilisez d\u00e9j\u00e0 Bootstrap dans votre projet, ignorez cette \u00e9tape.<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/><\/code><\/pre>\n
Ensuite, utilisez le code HTML suivant pour int\u00e9grer votre vid\u00e9o \u00e0 l’aide d’un Bootstrap.<\/p>\n
<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"embed-responsive embed-responsive-16by9\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"><\/iframe>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Remplacez l’espace r\u00e9serv\u00e9 VIDEO_ID par l’ID vid\u00e9o r\u00e9el. Essayez-le et vous devriez voir que votre vid\u00e9o fonctionne correctement sur des appareils plus petits.<\/p>\n
Vous pouvez en savoir plus sur cette m\u00e9thode d’int\u00e9gration dans la documentation Bootstrap<\/a>.<\/p>\n
Vid\u00e9o YouTube r\u00e9active \u00e0 l’aide de Fancybox<\/h3>\n
Cette option est un peu diff\u00e9rente. Ici, au lieu d’afficher directement la vid\u00e9o, nous affichons une vignette de la vid\u00e9o YouTube. Et puis en cliquant sur une vignette, votre vid\u00e9o commencera \u00e0 jouer dans la fen\u00eatre contextuelle. Cela peut \u00eatre fait en utilisant une fantaisie<\/a>.<\/p>\n
Pour utiliser Fancybox, vous devez inclure les fichiers CSS et JS suivants sur votre site Web.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><\/code><\/pre>\n
Apr\u00e8s cela, placez le code ci-dessous et vous avez termin\u00e9.<\/p>\n
<a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\">\n\u00a0\u00a0\u00a0\u00a0<img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/>\n<\/a><\/code><\/pre>\n
Int\u00e9grer YouTube Lite<\/h3>\n
Dans la premi\u00e8re m\u00e9thode, nous avons utilis\u00e9 du code iframe. Lors de l’utilisation d’un iframe, le navigateur doit t\u00e9l\u00e9charger pr\u00e8s de 800 Ko de donn\u00e9es pour restituer une vid\u00e9o.<\/p>\n
En utilisant fancybox, vous pouvez r\u00e9duire cette charge. Mais encore une fois, vous devez inclure leurs CSS et JS. L’ajout de ces fichiers via CDN est recommand\u00e9 pour lib\u00e9rer la charge du serveur.<\/p>\n
En travaillant sur ce sujet, je suis tomb\u00e9 sur un article qui explique l’int\u00e9gration de vid\u00e9os YouTube d’une mani\u00e8re diff\u00e9rente. Il n’a pas besoin d’utiliser d’iframe lors du chargement de la page ni d’inclure des fichiers.<\/p>\n
L’article fournit du code que n’importe qui peut facilement ajouter \u00e0 son application. Veuillez suivre l’article Lite YouTube Embeds<\/a> et ajouter le code comme sugg\u00e9r\u00e9.<\/p>\n
Ce sont les 3 fa\u00e7ons possibles d’int\u00e9grer une vid\u00e9o YouTube responsive. Selon vos besoins, vous pouvez choisir l’une des solutions.<\/p>\n
Articles Li\u00e9s<\/h4>\n