GMC YouTube Gallery / Video Hub
Ficha de producto · Joomla 5/6 y WordPress 6+
GMC YouTube Gallery / Video Hub
Videos, playlists, canales y galerias de busqueda con embeds privacy-enhanced.
Tus videos se convierten en un hub navegable, no en iframes sueltos que el visitante apenas ve.
Para quien es
Escuelas, editores, agencias y negocios locales que ya tienen contenido YouTube y quieren aprovecharlo mejor en su web.
Elige la opcion tranquila: instalas una vez, controlas feed o formulario dentro del CMS y dejas de depender del proximo cambio de un widget externo.
Que incluye
- Videos individuales, listas, playlists, canales y resultados de busqueda
- Plantillas grid, list, cinema, compact y circles
- Modo embed, lightbox o link
- Modo privacidad youtube-nocookie.com y cache de metadatos
Requisitos
- Joomla 5/6 o WordPress 6+
- PHP 8.1+
- YouTube Data API v3 key para playlists, canales, busqueda y metadatos
- Los embeds de video individual pueden funcionar sin API key
Shortcodes
{gmcyoutube video="VIDEO_ID" mode="lightbox" title="Featured video"}
{gmcyoutube playlist="PLAYLIST_ID" limit="12" template="cinema"}
[gmcyoutube channel="CHANNEL_ID" limit="9" channel_header="1"]
Todo incluido
62 funciones reales, agrupadas por área — toda la profundidad de GMC YouTube Gallery (Video Hub), un único conjunto de funciones alineado en Joomla y WordPress.
Fuentes de vídeo & tipos de galería
- Vídeo individual por ID — inserta un clip con solo su ID de YouTube.
- Vídeo individual por URL — pega cualquier enlace de YouTube (
youtu.be/…,watch?v=…,/embed/…,/shorts/…) y el ID se extrae automáticamente. - Galería con lista de vídeos manual — elige los vídeos a mano con una lista separada por comas, saltos de línea o barras verticales; crea una galería sin necesidad de ninguna clave API.
- Galería de lista de reproducción — muestra una lista de reproducción completa como galería con estilo, o recurre a un reproductor nativo con lista incrustada usando
gallery="false". - Galería de canal — muestra las últimas subidas de un canal, siempre ordenadas de la más reciente primero.
- Galería de búsqueda de YouTube — convierte una consulta de búsqueda en una galería en vivo de vídeos coincidentes.
- Fusión multifuente — combina varias listas de reproducción y/o canales más una lista de vídeos manual en un único shortcode; los resultados se fusionan, se deduplican por ID de vídeo y se ordenan de más reciente antes de aplicar el límite.
- Tarjeta de cabecera del canal — muestra opcionalmente el avatar, el título y la descripción del canal encima de una galería de canal.
- Repliegue elegante a enlace simple — un canal sin clave API (o con resultado vacío) se degrada a un simple enlace "canal de YouTube" en lugar de un bloque roto.
Modos de visualización & plantillas
- Tres modos de visualización por galería —
embeden línea,lightboxdesde miniatura olink(abre en YouTube); el modo se respeta dentro de las galerías, no solo en los vídeos individuales. - Lightbox con reproducción automática — las miniaturas abren una ventana modal a pantalla completa que reproduce el vídeo automáticamente; se cierra con el botón Cerrar o al hacer clic en el fondo.
- Nueve plantillas listas para usar — Cuadrícula, Lista, Cine (primer vídeo a todo lo ancho), Compacta (mosaicos de ajuste automático), Círculos, Superposición oscura, Tarjetas volteables (giro 3D al pasar el ratón) y dos cuadrículas de círculos (mosaicos circulares con rotación al pasar) — sin necesidad de CSS personalizado.
- Alias de plantillas — los nombres intuitivos se mapean automáticamente (
default/cards→ grid,circle→ circles,flipcard→ flipcards, además de variantes heredadas), de modo que los nombres importados o con errores tipográficos se resuelven igualmente. - Columnas configurables — de 1 a 6 columnas responsivas desde los ajustes (hasta 12 mediante shortcode); las plantillas de círculos heredadas usan 7 columnas por defecto salvo que definas las tuyas.
- Separación configurable — controla el espacio entre mosaicos de 0 a 48 px.
Experiencia frontend
- Totalmente responsiva — CSS Grid con puntos de ruptura automáticos (2 columnas por debajo de 760 px, 1 por debajo de 480 px; las plantillas de círculos tienen sus propias cuadrículas móviles ajustadas).
- Paginación con Cargar más — muestra un primer lote y revela el siguiente conjunto al hacer clic, manteniendo ligeras las galerías largas en la primera carga.
- Cabecera por galería — barra de título opcional con recuento de vídeos en vivo.
- Títulos y descripciones por vídeo — activa o desactiva cada uno; las descripciones se recortan por palabras (
max_words) para mantener ordenadas las tarjetas. - Carga diferida — las miniaturas y los iframes se cargan de forma diferida para páginas más rápidas.
- Cero recursos externos — todo el CSS y el JS se inyectan en línea una sola vez por página; sin jQuery, sin CDN, sin bibliotecas empaquetadas, nada extra que encolar.
Redacción & integración con el editor
- Cuatro shortcodes intercambiables —
gmcvideo,gmcvideohub,gmcyoutube,gmcyoutuber(tokens entre llaves en el texto de los artículos de Joomla; shortcodes entre corchetes en WordPress). - Botón de inserción visual — un botón en la barra de herramientas/editor coloca un fragmento de galería listo en una página sin pegar código de incrustación (botón editor-XTD en Joomla; botón multimedia del editor clásico en WordPress).
- Anulaciones por shortcode — cada valor predeterminado del sitio (modo, plantilla, columnas, separación, límite, tamaño de página, título/descripción, cabecera) puede anularse en línea en cualquier galería individual.
- Migración heredada silenciosa — los antiguos shortcodes
#module-354, html[lang^="en"] #module-355, html[lang^="it"] #module-353, html[lang^="it"] #module-355, html[lang^="es"] #module-353, html[lang^="es"] #module-354 { display: none !important; } #module-353 .uk-nav > li > a, #module-354 .uk-nav > li > a, #module-355 .uk-nav > li > a { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; } #module-353 .el-title, #module-354 .el-title, #module-355 .el-title, #module-353 .uk-panel-title, #module-354 .uk-panel-title, #module-355 .uk-panel-title { margin-bottom: 8px; } #module-353 .ftv-legal-links, #module-354 .ftv-legal-links, #module-355 .ftv-legal-links { line-height: 1.45; margin-top: 10px; } #module-353 .ftv-legal-links a, #module-354 .ftv-legal-links a, #module-355 .ftv-legal-links a, #module-353 .ftv-legal-phone, #module-354 .ftv-legal-phone, #module-355 .ftv-legal-phone { display: inline-block; margin-right: .55em; } #module-353 .uk-nav, #module-354 .uk-nav, #module-355 .uk-nav { margin-top: 6px; } #module-353 .uk-margin, #module-354 .uk-margin, #module-355 .uk-margin { margin-top: 10px; margin-bottom: 10px; } #module-353 #cf_2 .cf-content-wrap, #module-354 #cf_2 .cf-content-wrap, #module-355 #cf_2 .cf-content-wrap { display: none; } #module-353 #cf_2 .cf-form-wrap, #module-354 #cf_2 .cf-form-wrap, #module-355 #cf_2 .cf-form-wrap { padding-top: 0; } @media (max-width: 959px) { #module-353 .uk-nav, #module-354 .uk-nav, #module-355 .uk-nav { column-count: 2; column-gap: 18px; } #module-353 .uk-nav > li, #module-354 .uk-nav > li, #module-355 .uk-nav > li { break-inside: avoid; page-break-inside: avoid; } } @media (max-width: 420px) { #module-353 .uk-nav, #module-354 .uk-nav, #module-355 .uk-nav { column-gap: 12px; } #module-353 .uk-nav > li > a, #module-354 .uk-nav > li > a, #module-355 .uk-nav > li > a { font-size: 13px; } } /* GMC footer readability patch 2026-06-20 */ #module-353, #module-354, #module-355 { color: #f8fafc !important; } #module-353 p, #module-354 p, #module-355 p, #module-353 li, #module-354 li, #module-355 li, #module-353 .uk-panel, #module-354 .uk-panel, #module-355 .uk-panel, #module-353 .uk-nav > li > a, #module-354 .uk-nav > li > a, #module-355 .uk-nav > li > a { color: rgba(248, 250, 252, .96) !important; opacity: 1 !important; } #module-353 a, #module-354 a, #module-355 a { color: #ffffff !important; opacity: 1 !important; } #module-353 a:hover, #module-354 a:hover, #module-355 a:hover, #module-353 a:focus, #module-354 a:focus, #module-355 a:focus { color: #9bd8ff !important; } #module-353 .el-title, #module-354 .el-title, #module-355 .el-title, #module-353 h3, #module-354 h3, #module-355 h3 { color: #ffffff !important; }


