{"id":29082,"date":"2021-06-03T20:06:00","date_gmt":"2021-06-03T17:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29082"},"modified":"2021-10-17T04:27:09","modified_gmt":"2021-10-17T01:27:09","slug":"hur-man-skapar-youtube-videogalleri-for-din-webbplats","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-skapar-youtube-videogalleri-for-din-webbplats\/","title":{"rendered":"Hur man skapar YouTube-videogalleri f\u00f6r din webbplats"},"content":{"rendered":"

Vill du skapa ett lyh\u00f6rt YouTube-videogalleri? Du kanske vill lista ut YouTube-videorna tillsammans p\u00e5 webbplatsen. Det vanliga fl\u00f6det f\u00f6r detta \u00e4r att visa videominiatyrerna. Och n\u00e4r n\u00e5gon klickar p\u00e5 miniatyren ska den relaterade videon spelas upp i popup-f\u00f6nstret. Fr\u00e5n den \u00f6ppnade popup-f\u00f6nstret kan anv\u00e4ndare g\u00e5 till n\u00e4sta och f\u00f6reg\u00e5ende videor. S\u00e5 h\u00e4r ska videogallerier upptr\u00e4da normalt.<\/p>\n

I den h\u00e4r artikeln visar jag dig hur du skapar ett YouTube-videogalleri med Bootstrap och fancybox.<\/p>\n

Varf\u00f6r beh\u00f6ver du videogalleri p\u00e5 webbplatsen?<\/h3>\n

Ett videogalleri anv\u00e4nds f\u00f6r att organisera din videosamling. Genom att skapa ett videogalleri kan dina anv\u00e4ndare se din videosamling p\u00e5 ett st\u00e4lle. Bortsett fr\u00e5n det kan det finnas andra sk\u00e4l att s\u00e4tta galleriet p\u00e5 webbplatsen. L\u00e5t oss s\u00e4ga att du har avslutat ett aff\u00e4rsh\u00e4ndelse eller m\u00f6ten och nu vill du visa alla dina evenemangsvideor p\u00e5 webbplatsen f\u00f6r anv\u00e4ndarna.<\/p>\n

Videogalleriet hj\u00e4lper ocks\u00e5 till att \u00f6ka din YouTube-kanal.<\/p>\n

Med detta sagt, l\u00e5t oss se att skapa ett YouTube-videogalleri p\u00e5 webbplatsen. V\u00e5r slutliga produktion visas som en sk\u00e4rmdump nedan.<\/p>\n

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

Skapa YouTube Video Gallery med Bootstrap och fancybox<\/h3>\n

Jag ska l\u00e4gga grunddesignen f\u00f6r ett videogalleri. Min huvudsakliga avsikt \u00e4r att visa dig hur du f\u00e5r YouTube-miniatyrbilder och hur du spelar video i fancybox. Anv\u00e4ndaren ska l\u00e4gga till sin egen styling till den slutliga utg\u00e5ngen.<\/p>\n

Skaffa en miniatyrbild av YouTube-video<\/h4>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste vi skriva en kod som returnerar en miniatyr av YouTube-videon. Som ett exempel tar jag n\u00e5gra av mina YouTube-videor. I koden nedan har jag skrivit en metod som extraherar id: n fr\u00e5n YouTube-webbadresser och returnerar en miniatyr av YouTube-videor.<\/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
Metoden extractVideoID()<\/code>returnerar ett video-id fr\u00e5n videon URL. Med hj\u00e4lp av detta video-id h\u00e4mtar vi videominiatyren med funktionen getYouTubeThumbnailImage<\/code>.<\/p>\n
Visa ett galleri<\/h4>\n
Jag kommer att g\u00e5 igenom utbudet av videor, f\u00e5 miniatyren och l\u00e4gga den p\u00e5 en sida. Medan jag gjorde detta integrerade jag ocks\u00e5 en fancybox f\u00f6r<\/a> att spela upp videon i lightbox. Den fancybox-tillhandah\u00e5llna ljusboxen \u00e4r ber\u00f6ringsaktiverad, lyh\u00f6rd och helt anpassningsbar.<\/p>\n
L\u00e5t oss skriva en HTML med hj\u00e4lp av Bootstrap och fancybox enligt f\u00f6ljande.<\/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
G\u00e5 till webbl\u00e4saren och prova. Du borde kunna se ett fungerande videogalleri p\u00e5 YouTube.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du skapar ett YouTube-videogalleri p\u00e5 webbplatsen. Dela dina tankar och f\u00f6rslag i en kommentar nedan.<\/p>\n
relaterade artiklar<\/h4>\n