{"id":28964,"date":"2021-06-03T20:22:00","date_gmt":"2021-06-03T17:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28964"},"modified":"2021-10-18T03:37:31","modified_gmt":"2021-10-18T00:37:31","slug":"jak-stworzyc-galerie-wideo-youtube-dla-swojej-witryny","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-stworzyc-galerie-wideo-youtube-dla-swojej-witryny\/","title":{"rendered":"Jak stworzy\u0107 galeri\u0119 wideo YouTube dla swojej witryny?"},"content":{"rendered":"

Chcesz stworzy\u0107 responsywn\u0105 galeri\u0119 wideo YouTube? Mo\u017cesz wymieni\u0107 filmy z YouTube razem na stronie internetowej. Zwykle odbywa si\u0119 to za pomoc\u0105 miniatur wideo. A gdy kto\u015b kliknie miniatur\u0119, powi\u0105zany film powinien zosta\u0107 odtworzony w wyskakuj\u0105cym okienku. Z otwartego wyskakuj\u0105cego okienka u\u017cytkownicy mog\u0105 przej\u015b\u0107 do nast\u0119pnych i poprzednich film\u00f3w. Tak powinny zachowywa\u0107 si\u0119 galerie wideo.<\/p>\n

W tym artykule poka\u017c\u0119, jak stworzy\u0107 galeri\u0119 wideo na YouTube za pomoc\u0105 Bootstrapa i fancybox.<\/p>\n

Dlaczego potrzebujesz galerii wideo na stronie internetowej?<\/h3>\n

Galeria wideo s\u0142u\u017cy do organizowania kolekcji wideo. Tworz\u0105c galeri\u0119 wideo, u\u017cytkownicy mog\u0105 przegl\u0105da\u0107 Twoj\u0105 kolekcj\u0119 film\u00f3w w jednym miejscu. Poza tym mog\u0105 by\u0107 inne powody, aby umie\u015bci\u0107 galeri\u0119 na stronie. Za\u0142\u00f3\u017cmy, \u017ce zako\u0144czy\u0142e\u015b wydarzenie biznesowe lub spotkanie, a teraz chcesz wy\u015bwietli\u0107 u\u017cytkownikom wszystkie swoje filmy wideo z wydarze\u0144 w witrynie internetowej.<\/p>\n

Galeria film\u00f3w jest r\u00f3wnie\u017c pomocna w zwi\u0119kszaniu ogl\u0105dalno\u015bci Twojego kana\u0142u YouTube.<\/p>\n

To powiedziawszy, przyjrzyjmy si\u0119 tworzeniu galerii wideo YouTube na stronie internetowej. Nasz ostateczny wynik zostanie pokazany na poni\u017cszym zrzucie ekranu.<\/p>\n

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

Utw\u00f3rz galeri\u0119 wideo YouTube za pomoc\u0105 Bootstrap i fancybox<\/h3>\n

Zamieszcz\u0119 podstawowy projekt galerii wideo. Moim g\u0142\u00f3wnym celem jest pokazanie, jak uzyska\u0107 miniatury film\u00f3w z YouTube i jak odtwarza\u0107 wideo w fancybox. U\u017cytkownik powinien doda\u0107 w\u0142asny styl do ko\u0144cowego wyniku.<\/p>\n

Uzyskaj miniatur\u0119 filmu z YouTube<\/h4>\n

Aby rozpocz\u0105\u0107, musimy napisa\u0107 kod, kt\u00f3ry zwr\u00f3ci miniatur\u0119 filmu na YouTube. Jako przyk\u0142ad bior\u0119 kilka moich film\u00f3w z YouTube. W poni\u017cszym kodzie napisa\u0142em metod\u0119, kt\u00f3ra wyodr\u0119bnia identyfikator z adres\u00f3w URL film\u00f3w z YouTube i zwraca miniatur\u0119 film\u00f3w z 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
Metoda extractVideoID()<\/code>zwr\u00f3ci identyfikator wideo z adresu URL wideo. U\u017cywaj\u0105c tego identyfikatora wideo, pobieramy miniatur\u0119 wideo za pomoc\u0105 funkcji getYouTubeThumbnailImage<\/code>.<\/p>\n
Wy\u015bwietl galeri\u0119<\/h4>\n
Przejd\u0119 przez szereg film\u00f3w, zdob\u0119d\u0119 miniatur\u0119 i umieszcz\u0119 j\u0105 na stronie. Robi\u0105c to, zintegrowa\u0142em r\u00f3wnie\u017c fancybox,<\/a> aby odtwarza\u0107 wideo w lightbox. Fancybox pod warunkiem, \u017ce lightbox jest dotykowy, responsywny i w pe\u0142ni konfigurowalny.<\/p>\n
Napiszmy HTML za pomoc\u0105 Bootstrapa i fancybox w nast\u0119puj\u0105cy spos\u00f3b.<\/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
Przejd\u017a do przegl\u0105darki i spr\u00f3buj. Powiniene\u015b by\u0107 w stanie zobaczy\u0107 dzia\u0142aj\u0105c\u0105 galeri\u0119 wideo YouTube.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak stworzy\u0107 galeri\u0119 wideo YouTube na stronie. Podziel si\u0119 swoimi przemy\u015bleniami i sugestiami w komentarzu poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n