{"id":28934,"date":"2021-06-03T20:20:00","date_gmt":"2021-06-03T17:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28934"},"modified":"2021-10-17T16:29:21","modified_gmt":"2021-10-17T13:29:21","slug":"como-crear-una-galeria-de-videos-de-youtube-para-su-sitio-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-crear-una-galeria-de-videos-de-youtube-para-su-sitio-web\/","title":{"rendered":"C\u00f3mo crear una galer\u00eda de videos de YouTube para su sitio web"},"content":{"rendered":"

\u00bfQuieres crear una galer\u00eda de videos de YouTube receptiva? Es posible que desee enumerar los videos de YouTube juntos en el sitio web. El flujo habitual para esto es mostrar las miniaturas de los videos. Y cuando alguien hace clic en la miniatura, el video relacionado deber\u00eda reproducirse en la ventana emergente. Desde la ventana emergente abierta, los usuarios pueden ir a los videos anteriores y siguientes. As\u00ed es como deber\u00edan comportarse las galer\u00edas de v\u00eddeos con normalidad.<\/p>\n

En este art\u00edculo, te muestro c\u00f3mo crear una galer\u00eda de videos de YouTube usando Bootstrap y fancybox.<\/p>\n

\u00bfPor qu\u00e9 se necesita una galer\u00eda de videos en el sitio web?<\/h3>\n

Se utiliza una galer\u00eda de videos para organizar su colecci\u00f3n de videos. Al crear una galer\u00eda de videos, sus usuarios pueden ver su colecci\u00f3n de videos en un solo lugar. Aparte de esto, puede haber otras razones para poner la galer\u00eda en el sitio web. Digamos que complet\u00f3 un evento de negocios o reuniones y ahora desea mostrar todos los videos de su evento en el sitio web para los usuarios.<\/p>\n

La galer\u00eda de videos tambi\u00e9n es \u00fatil para aumentar las vistas de su canal de YouTube.<\/p>\n

Dicho esto, veamos c\u00f3mo crear una galer\u00eda de videos de YouTube en el sitio web. Nuestro resultado final se mostrar\u00e1 como una captura de pantalla a continuaci\u00f3n.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Crea una galer\u00eda de videos de YouTube usando Bootstrap y fancybox<\/h3>\n

Voy a poner el dise\u00f1o b\u00e1sico para una galer\u00eda de videos. Mi intenci\u00f3n principal es mostrarte c\u00f3mo obtener miniaturas de videos de YouTube y c\u00f3mo reproducir videos en Fancybox. El usuario debe agregar su propio estilo al resultado final.<\/p>\n

Obtenga una miniatura del video de YouTube<\/h4>\n

Para comenzar, necesitamos escribir un c\u00f3digo que devuelva una miniatura del video de YouTube. Como ejemplo, estoy tomando algunos de mis videos de YouTube. En el siguiente c\u00f3digo, escrib\u00ed un m\u00e9todo que extrae la identificaci\u00f3n de las URL de los videos de YouTube y devuelve una miniatura de los videos de 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
El m\u00e9todo extractVideoID()<\/code>devolver\u00e1 una identificaci\u00f3n de video de la URL del video. Usando esta identificaci\u00f3n de video, obtenemos la miniatura del video con la funci\u00f3n getYouTubeThumbnailImage<\/code>.<\/p>\n
Mostrar una galer\u00eda<\/h4>\n
Recorrer\u00e9 la serie de videos, obtendr\u00e9 la miniatura y la pondr\u00e9 en una p\u00e1gina. Mientras hac\u00eda esto, tambi\u00e9n integr\u00e9<\/a> un fancybox<\/a> para reproducir el video en lightbox. La caja de luz proporcionada por fancybox es t\u00e1ctil, sensible y totalmente personalizable.<\/p>\n
Escribamos un HTML con la ayuda de Bootstrap y fancybox de la siguiente manera.<\/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
Ve al navegador y pru\u00e9balo. Deber\u00eda poder ver una galer\u00eda de videos de YouTube en funcionamiento.<\/p>\n
Espero que comprenda c\u00f3mo crear una galer\u00eda de videos de YouTube en el sitio web. Comparta sus pensamientos y sugerencias en un comentario a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n