{"id":28189,"date":"2021-06-03T19:52:00","date_gmt":"2021-06-03T16:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28189"},"modified":"2021-10-18T04:04:51","modified_gmt":"2021-10-18T01:04:51","slug":"como-criar-a-galeria-de-videos-do-youtube-para-seu-site","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-a-galeria-de-videos-do-youtube-para-seu-site\/","title":{"rendered":"Como criar a galeria de v\u00eddeos do YouTube para seu site"},"content":{"rendered":"

Voc\u00ea deseja criar uma galeria de v\u00eddeos do YouTube responsiva? Voc\u00ea pode querer listar os v\u00eddeos do YouTube juntos no site. O fluxo normal para isso \u00e9 exibir as miniaturas de v\u00eddeo. E quando algu\u00e9m clica na miniatura, o v\u00eddeo relacionado deve ser reproduzido no pop-up. A partir do pop-up aberto, os usu\u00e1rios podem ir para o pr\u00f3ximo v\u00eddeo e o anterior. \u00c9 assim que as galerias de v\u00eddeo devem se comportar normalmente.<\/p>\n

Neste artigo, mostro como criar uma galeria de v\u00eddeos no YouTube usando Bootstrap e fancybox.<\/p>\n

Por que precisa da galeria de v\u00eddeo no site?<\/h3>\n

Uma galeria de v\u00eddeo \u00e9 usada para organizar sua cole\u00e7\u00e3o de v\u00eddeos. Ao criar uma galeria de v\u00eddeo, seus usu\u00e1rios podem visualizar sua cole\u00e7\u00e3o de v\u00eddeos em um s\u00f3 lugar. Al\u00e9m disso, pode haver outros motivos para colocar a galeria no site. Digamos que voc\u00ea concluiu um evento de neg\u00f3cios ou encontros e agora deseja exibir todos os v\u00eddeos do evento no site para os usu\u00e1rios.<\/p>\n

A galeria de v\u00eddeos tamb\u00e9m \u00e9 \u00fatil para aumentar as visualiza\u00e7\u00f5es do seu canal no YouTube.<\/p>\n

Dito isso, vamos ver como criar uma galeria de v\u00eddeos do YouTube no site. Nosso resultado final ser\u00e1 mostrado como uma captura de tela abaixo.<\/p>\n

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

Crie a galeria de v\u00eddeos do YouTube usando Bootstrap e fancybox<\/h3>\n

Vou fazer o design b\u00e1sico de uma galeria de v\u00eddeos. Minha inten\u00e7\u00e3o principal \u00e9 mostrar a voc\u00ea como obter miniaturas de v\u00eddeo do YouTube e como reproduzi-lo no fancybox. O usu\u00e1rio deve adicionar seu pr\u00f3prio estilo \u00e0 sa\u00edda final.<\/p>\n

Obtenha uma miniatura do v\u00eddeo do YouTube<\/h4>\n

Para come\u00e7ar, precisamos escrever um c\u00f3digo que retorne uma miniatura do v\u00eddeo do YouTube. Como exemplo, estou pegando alguns dos meus v\u00eddeos do YouTube. No c\u00f3digo a seguir, escrevi um m\u00e9todo que extrai o id dos URLs de v\u00eddeo do YouTube e retorna uma miniatura dos v\u00eddeos do 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
O m\u00e9todo extractVideoID()<\/code>retornar\u00e1 um id de v\u00eddeo do URL do v\u00eddeo. Usando este ID de v\u00eddeo, buscamos a miniatura do v\u00eddeo com a fun\u00e7\u00e3o getYouTubeThumbnailImage<\/code>.<\/p>\n
Exibir uma galeria<\/h4>\n
Vou percorrer a matriz de v\u00eddeos, pegar a miniatura e coloc\u00e1-la em uma p\u00e1gina. Ao fazer isso, tamb\u00e9m integrei<\/a> uma caixa de imagem<\/a> para reproduzir o v\u00eddeo na caixa de luz. A caixa de luz fornecida da caixa de fantasia \u00e9 habilitada para toque, responsiva e totalmente personaliz\u00e1vel.<\/p>\n
Vamos escrever um HTML com a ajuda do Bootstrap e do fancybox da seguinte maneira.<\/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
V\u00e1 para o navegador e experimente. Voc\u00ea deve conseguir ver uma galeria de v\u00eddeos do YouTube em funcionamento.<\/p>\n
Espero que voc\u00ea entenda como criar uma galeria de v\u00eddeos do YouTube no site. Por favor, compartilhe seus pensamentos e sugest\u00f5es em um coment\u00e1rio abaixo.<\/p>\n
Artigos relacionados<\/h4>\n