{"id":25752,"date":"2021-06-03T19:56:00","date_gmt":"2021-06-03T16:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25752"},"modified":"2021-10-17T18:29:42","modified_gmt":"2021-10-17T15:29:42","slug":"kuidas-luua-oma-veebisaidile-youtube-i-videogaleriid","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-luua-oma-veebisaidile-youtube-i-videogaleriid\/","title":{"rendered":"Kuidas luua oma veebisaidile YouTube’i videogaleriid"},"content":{"rendered":"

Kas soovite luua tundliku YouTube’i videogalerii? V\u00f5iksite YouTube’is videod koos veebisaidil loetleda. Tavaline k\u00e4ik selleks on video pisipiltide kuvamine. Ja kui keegi kl\u00f5psab pisipildil, peaks seotud video seda h\u00fcpikaknas esitama. Avatud h\u00fcpikaknast saavad kasutajad minna j\u00e4rgmise ja eelmise video juurde. Nii peaksid videogaleriid k\u00e4ituma normaalselt.<\/p>\n

Selles artiklis n\u00e4itan teile, kuidas luua YouTube’i videogaleriid Bootstrapi ja fancyboxi abil.<\/p>\n

Miks on vaja veebisaidil videogaleriid?<\/h3>\n

Teie videokogu korraldamiseks kasutatakse videogaleriid. Videogalerii loomisega saavad teie kasutajad teie videokogu \u00fches kohas vaadata. Peale selle v\u00f5ib galerii veebisaidile lisamiseks olla muid p\u00f5hjuseid. Oletame, et olete l\u00f5petanud \u00e4ri\u00fcrituse v\u00f5i koosolekud ja soovite n\u00fc\u00fcd k\u00f5ik oma \u00fcrituse videod veebisaidil kasutajatele kuvada.<\/p>\n

Videogaleriist on abi ka teie YouTube’i kanali vaatamiste suurendamisel.<\/p>\n

Seda \u00f6eldes vaatame veebisaidil YouTube’i videogalerii loomist. Meie l\u00f5plik v\u00e4ljund kuvatakse ekraanipildina allpool.<\/p>\n

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

Looge YouTube’i videogalerii, kasutades Bootstrapi ja fancyboxi<\/h3>\n

Panen videogalerii p\u00f5hikujunduse. Minu peamine eesm\u00e4rk on n\u00e4idata teile, kuidas hankida YouTube’i video pisipilte ja kuidas videot fancyboxis m\u00e4ngida. Kasutaja peaks lisama l\u00f5plikule v\u00e4ljundile oma stiili.<\/p>\n

Hankige YouTube’i video pisipilt<\/h4>\n

Alustamiseks peame kirjutama koodi, mis tagastab YouTube’i video pisipildi. N\u00e4iteks v\u00f5tan m\u00f5ned oma YouTube’i videod. Allolevas koodis olen kirjutanud meetodi, mis eraldab ID YouTube’i video URL-idest ja tagastab YouTube’i videote pisipildi.<\/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
Meetod extractVideoID()<\/code>tagastab video URL-i video URL-ist. Selle video ID abil toome funktsiooni abil video pisipildi getYouTubeThumbnailImage<\/code>.<\/p>\n
Kuva galerii<\/h4>\n
Tutvun videote hulgaga, leian pisipildi ja panen selle lehele. Seda tehes integreerisin ka valguskastis video esitamiseks \u00fche v\u00e4ljam\u00f5eldud kasti<\/a>. Fancyboxi pakutav valguskast on puutetundlik, reageeriv ja t\u00e4ielikult kohandatav.<\/p>\n
Kirjutame Bootstrapi ja fancyboxi abil HTML j\u00e4rgmiselt.<\/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
Minge brauserisse ja proovige. Peaksite n\u00e4gema toimivat YouTube’i videogaleriid.<\/p>\n
Loodetavasti saate aru, kuidas veebisaidil YouTube’i videogaleriid luua. Palun jagage oma m\u00f5tteid ja ettepanekuid allpool toodud kommentaaris.<\/p>\n
seotud artiklid<\/h4>\n