{"id":25262,"date":"2021-06-03T19:56:00","date_gmt":"2021-06-03T16:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25262"},"modified":"2021-10-17T20:28:05","modified_gmt":"2021-10-17T17:28:05","slug":"kuinka-luoda-youtube-videogalleria-verkkosivustollesi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-luoda-youtube-videogalleria-verkkosivustollesi\/","title":{"rendered":"Kuinka luoda YouTube-videogalleria verkkosivustollesi"},"content":{"rendered":"

Haluatko luoda reagoivan YouTube-videogallerian? Haluat ehk\u00e4 listata YouTube-videot yhdess\u00e4 verkkosivustolla. Tavallinen kulku t\u00e4h\u00e4n on videon pikkukuvien n\u00e4ytt\u00e4minen. Ja kun joku napsauttaa pikkukuvaa, aiheeseen liittyv\u00e4n videon pit\u00e4isi toistaa ponnahdusikkunassa. Avatusta ponnahdusikkunasta k\u00e4ytt\u00e4j\u00e4t voivat siirty\u00e4 seuraavaan ja edelliseen videoon. N\u00e4in videogallerioiden tulisi k\u00e4ytt\u00e4yty\u00e4 normaalisti.<\/p>\n

T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka voit luoda YouTube-videogallerian Bootstrapin ja fancyboxin avulla.<\/p>\n

Miksi tarvitset videogallerian verkkosivustolla?<\/h3>\n

Videogalleriaa k\u00e4ytet\u00e4\u00e4n videokokoelman j\u00e4rjest\u00e4miseen. Luomalla videogallerian k\u00e4ytt\u00e4j\u00e4t voivat katsella videokokoelmasi yhdess\u00e4 paikassa. Sen lis\u00e4ksi voi olla muita syit\u00e4 laittaa galleria verkkosivustolle. Oletetaan, ett\u00e4 olet suorittanut yritystapahtuman tai tapaamiset ja haluat nyt n\u00e4ytt\u00e4\u00e4 kaikki tapahtumavideosi verkkosivustolla k\u00e4ytt\u00e4jille.<\/p>\n

Videogalleria on hy\u00f6dyllinen my\u00f6s YouTube-kanavasi n\u00e4ytt\u00f6kertojen lis\u00e4\u00e4misess\u00e4.<\/p>\n

T\u00e4m\u00e4n sanotaan, katsotaanpa luoda YouTube-videogalleria verkkosivustolle. Lopullinen tuotoksemme n\u00e4ytet\u00e4\u00e4n alla olevana kuvakaappauksena.<\/p>\n

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

Luo YouTube-videogalleria Bootstrapin ja fancyboxin avulla<\/h3>\n

Aion laittaa videogallerian perussuunnitelman. P\u00e4\u00e4tavoitteeni on n\u00e4ytt\u00e4\u00e4, miten voit hankkia YouTube-videoiden pikkukuvia ja kuinka toistaa videoita fancyboxissa. K\u00e4ytt\u00e4j\u00e4n tulee lis\u00e4t\u00e4 oma muotoilunsa lopputulokseen.<\/p>\n

Hanki pikkukuva YouTube-videosta<\/h4>\n

Aloittamiseksi meid\u00e4n on kirjoitettava koodi, joka palauttaa YouTube-videon pikkukuvan. Otan esimerkkin\u00e4 muutaman YouTube-videoni. Olen kirjoittanut alla olevaan koodiin menetelm\u00e4n, joka poimii tunnuksen YouTube-video-URL-osoitteista ja palauttaa pikkukuvan YouTube-videoista.<\/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
Menetelm\u00e4 extractVideoID()<\/code>palauttaa videotunnuksen videon URL-osoitteesta. T\u00e4m\u00e4n videotunnuksen avulla haemme videon pikkukuvan toiminnolla getYouTubeThumbnailImage<\/code>.<\/p>\n
N\u00e4yt\u00e4 galleria<\/h4>\n
Selaan joukko videoita, haen pikkukuvan ja laitan sen sivulle. T\u00e4t\u00e4 tehdess\u00e4ni integroin my\u00f6s fancyboxin<\/a> toistamaan videota lightboxissa. Fancyboxin toimittama valolaatikko on kosketusn\u00e4ytt\u00f6inen, reagoiva ja t\u00e4ysin muokattavissa.<\/p>\n
Kirjoitetaan HTML Bootstrapin ja fancyboxin avulla seuraavasti.<\/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
Mene selaimeen ja kokeile. Sinun pit\u00e4isi n\u00e4hd\u00e4 toimiva YouTube-videogalleria.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka luoda YouTube-videogalleria verkkosivustolle. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommentissa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n