{"id":25299,"date":"2021-06-03T20:07:00","date_gmt":"2021-06-03T17:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25299"},"modified":"2021-10-18T02:09:16","modified_gmt":"2021-10-17T23:09:16","slug":"comment-creer-une-galerie-de-videos-youtube-pour-votre-site-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-une-galerie-de-videos-youtube-pour-votre-site-web\/","title":{"rendered":"Comment cr\u00e9er une galerie de vid\u00e9os YouTube pour votre site Web"},"content":{"rendered":"

Voulez-vous cr\u00e9er une galerie de vid\u00e9os YouTube responsive\u00a0? Vous voudrez peut-\u00eatre r\u00e9pertorier les vid\u00e9os YouTube ensemble sur le site Web. Le flux habituel pour cela affiche les vignettes vid\u00e9o. Et lorsque quelqu’un clique sur la vignette, la vid\u00e9o associ\u00e9e doit \u00eatre lue dans la fen\u00eatre contextuelle. \u00c0 partir de la fen\u00eatre contextuelle ouverte, les utilisateurs peuvent acc\u00e9der aux vid\u00e9os suivantes et pr\u00e9c\u00e9dentes. C’est ainsi que les galeries de vid\u00e9os devraient se comporter normalement.<\/p>\n

Dans cet article, je vous montre comment cr\u00e9er une galerie de vid\u00e9os YouTube \u00e0 l’aide de Bootstrap et de fancybox.<\/p>\n

Pourquoi avoir besoin d’une galerie vid\u00e9o sur le site Web\u00a0?<\/h3>\n

Une galerie vid\u00e9o est utilis\u00e9e pour organiser votre collection de vid\u00e9os. En cr\u00e9ant une galerie de vid\u00e9os, vos utilisateurs peuvent visualiser votre collection de vid\u00e9os en un seul endroit. En dehors de cela, il peut y avoir d’autres raisons de mettre la galerie sur le site Web. Supposons que vous ayez termin\u00e9 un \u00e9v\u00e9nement professionnel ou des rencontres et que vous souhaitiez maintenant afficher toutes les vid\u00e9os de votre \u00e9v\u00e9nement sur le site Web pour les utilisateurs.<\/p>\n

La galerie de vid\u00e9os est \u00e9galement utile pour augmenter le nombre de vues de votre cha\u00eene YouTube.<\/p>\n

Cela dit, voyons cr\u00e9er une galerie de vid\u00e9os YouTube sur le site Web. Notre sortie finale sera affich\u00e9e sous forme de capture d’\u00e9cran ci-dessous.<\/p>\n

\"Comment<\/a><\/p>\n

Cr\u00e9er une galerie de vid\u00e9os YouTube \u00e0 l’aide de Bootstrap et de fancybox<\/h3>\n

Je vais mettre le design de base pour une galerie vid\u00e9o. Mon intention principale est de vous montrer comment obtenir des miniatures de vid\u00e9os YouTube et comment lire des vid\u00e9os dans fancybox. L’utilisateur doit ajouter son propre style \u00e0 la sortie finale.<\/p>\n

Obtenez une miniature de la vid\u00e9o YouTube<\/h4>\n

Pour commencer, nous devons \u00e9crire un code qui renvoie une vignette de la vid\u00e9o YouTube. \u00c0 titre d’exemple, je prends quelques-unes de mes vid\u00e9os YouTube. Dans le code ci-dessous, j’ai \u00e9crit une m\u00e9thode qui extrait l’identifiant des URL des vid\u00e9os YouTube et renvoie une vignette des vid\u00e9os YouTube.<\/p>\n

<?php\n$arr_video_ids = array(\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=Pzv_lUp3iOQ',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=zRtU8dpTEXg',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=EfSfLyeREMc',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=C-nypyy4pLg',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=OJpMT3odXtQ',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=WBnzOyBVwdg',\n);\n\u00a0\nfunction getYouTubeThumbnailImage($video_id) {\n\u00a0\u00a0\u00a0\u00a0return \"http:\/\/i3.ytimg.com\/vi\/$video_id\/hqdefault.jpg\";\n}\n\u00a0\nfunction extractVideoID($url){\n\u00a0\u00a0\u00a0\u00a0$regExp = \"\/^.*((youtu.be\/)|(v\/)|(\/u\/w\/)|(embed\/)|(watch?))??v?=?([^#&?]*).*\/\";\n\u00a0\u00a0\u00a0\u00a0preg_match($regExp, $url, $video);\n\u00a0\u00a0\u00a0\u00a0return $video[7];\n}\n?><\/code><\/pre>\n
La m\u00e9thode extractVideoID()<\/code>renverra un identifiant vid\u00e9o \u00e0 partir de l’URL de la vid\u00e9o. En utilisant cet identifiant vid\u00e9o, nous r\u00e9cup\u00e9rons la vignette de la vid\u00e9o avec la fonction getYouTubeThumbnailImage<\/code>.<\/p>\n
Afficher une galerie<\/h4>\n
Je vais parcourir la gamme de vid\u00e9os, obtenir la vignette et la mettre sur une page. Ce faisant, j’ai \u00e9galement int\u00e9gr\u00e9 une fancybox<\/a> pour lire la vid\u00e9o en lightbox. La lightbox fournie par fancybox est tactile, r\u00e9active et enti\u00e8rement personnalisable.<\/p>\n
\u00c9crivons un code HTML \u00e0 l’aide de Bootstrap et de fancybox comme suit.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\" \/>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/css\/bootstrap.min.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<h3 class=\"text-center\">My Video Gallery<\/h3>\n\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($arr_video_ids as $video) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$video_id = extractVideoID($video);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$video_thumbnail = getYouTubeThumbnailImage($video_id);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"pb-2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a data-fancybox=\"video-gallery\" href=\"<?php echo $video; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo $video_thumbnail; ?>\" class=\"img-thumbnail\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script><\/code><\/pre>\n
Allez dans le navigateur et essayez. Vous devriez pouvoir voir une galerie de vid\u00e9os YouTube fonctionnelle.<\/p>\n
J’esp\u00e8re que vous comprenez comment cr\u00e9er une galerie de vid\u00e9os YouTube sur le site Web. Veuillez partager vos pens\u00e9es et suggestions dans un commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n