{"id":25613,"date":"2021-06-03T20:33:00","date_gmt":"2021-06-03T17:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25613"},"modified":"2021-10-18T03:05:54","modified_gmt":"2021-10-18T00:05:54","slug":"come-creare-una-galleria-video-di-youtube-per-il-tuo-sito-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-creare-una-galleria-video-di-youtube-per-il-tuo-sito-web\/","title":{"rendered":"Come creare una galleria video di YouTube per il tuo sito web"},"content":{"rendered":"

Vuoi creare una galleria di video YouTube reattiva? Potresti voler elencare i video di YouTube insieme sul sito web. Il flusso usuale per questo \u00e8 la visualizzazione delle miniature dei video. E quando qualcuno fa clic sulla miniatura, il video correlato dovrebbe essere riprodotto nel pop-up. Dal pop-up aperto, gli utenti possono passare al video successivo e precedente. Ecco come dovrebbero comportarsi normalmente le gallerie video.<\/p>\n

In questo articolo, ti mostro come creare una galleria video di YouTube usando Bootstrap e fancybox.<\/p>\n

Perch\u00e9 \u00e8 necessaria una galleria video sul sito web?<\/h3>\n

Una galleria video viene utilizzata per organizzare la tua raccolta video. Creando una galleria video, i tuoi utenti possono visualizzare la tua raccolta di video in un unico posto. A parte questo, potrebbero esserci altri motivi per mettere la galleria sul sito web. Supponiamo che tu abbia completato un evento aziendale o un meetup e ora desideri visualizzare tutti i video dei tuoi eventi sul sito web per gli utenti.<\/p>\n

La galleria video \u00e8 utile anche per aumentare le visualizzazioni del tuo canale YouTube.<\/p>\n

Detto questo, vediamo la creazione di una galleria video di YouTube sul sito web. Il nostro output finale verr\u00e0 mostrato come uno screenshot di seguito.<\/p>\n

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

Crea una galleria video di YouTube usando Bootstrap e fancybox<\/h3>\n

Metter\u00f2 il design di base per una galleria video. La mia intenzione principale \u00e8 mostrarti come ottenere le miniature dei video di YouTube e come riprodurre i video in fancybox. L’utente deve aggiungere il proprio stile all’output finale.<\/p>\n

Ottieni una miniatura del video di YouTube<\/h4>\n

Per iniziare, dobbiamo scrivere un codice che restituisca una miniatura del video di YouTube. Ad esempio, sto prendendo alcuni dei miei video di YouTube. Nel codice seguente ho scritto un metodo che estrae l’id dagli URL dei video di YouTube e restituisce una miniatura dei video di 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
Il metodo extractVideoID()<\/code>restituir\u00e0 un ID video dall’URL del video. Usando questo ID video, recuperiamo la miniatura del video con la funzione getYouTubeThumbnailImage<\/code>.<\/p>\n
Mostra una galleria<\/h4>\n
Far\u00f2 scorrere la serie di video, otterr\u00f2 la miniatura e la metter\u00f2 su una pagina. Mentre facevo questo, ho anche integrato un fancybox<\/a> per riprodurre il video in lightbox. La lightbox fornita da fancybox \u00e8 abilitata al tocco, reattiva e completamente personalizzabile.<\/p>\n
Scriviamo un HTML con l’aiuto di Bootstrap e fancybox come segue.<\/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
Vai al browser e prova. Dovresti essere in grado di vedere una galleria video di YouTube funzionante.<\/p>\n
Spero che tu capisca come creare una galleria video di YouTube sul sito web. Per favore condividi i tuoi pensieri e suggerimenti in un commento qui sotto.<\/p>\n
articoli Correlati<\/h4>\n