GMC YouTube Gallery / Video Hub
Product detail · Joomla 5/6 and WordPress 6+
GMC YouTube Gallery / Video Hub
Video, playlists, channels and search galleries with privacy-enhanced embeds.
Your videos become a navigable content hub instead of scattered iframes that visitors barely notice.
Who it is for
Schools, publishers, agencies and local businesses that already have YouTube content and want it to work harder on the website.
Choose the calm option: install it once, keep the feed or form under your control, and stop wondering which external widget will change next.
What is inside
- Single videos, lists, playlists, channels and search results
- Grid, list, cinema, compact and circles templates
- Embed, lightbox or link mode
- youtube-nocookie.com privacy mode and metadata cache
Requirements
- Joomla 5/6 or WordPress 6+
- PHP 8.1+
- YouTube Data API v3 key for playlists, channels, search and metadata
- Single video embeds can work without an 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"]
Everything included
62 real features, grouped by area — the full depth of GMC YouTube Gallery (Video Hub), one aligned feature set on Joomla and WordPress.
Video sources & gallery types
- Single video by ID — drop in one clip with just its YouTube ID.
- Single video by URL — paste any YouTube link (
youtu.be/…,watch?v=…,/embed/…,/shorts/…) and it extracts the ID automatically. - Manual video-list gallery — hand-pick videos with a comma-, newline- or pipe-separated list; builds a gallery with zero API key needed.
- Playlist gallery — render a full playlist as a styled gallery, or fall back to a native embedded playlist player with
gallery="false". - Channel gallery — show a channel's latest uploads, always ordered newest-first.
- YouTube search gallery — turn a search query into a live gallery of matching videos.
- Multi-source merge — combine several playlists and/or channels plus a manual video list in a single shortcode; results are merged, de-duplicated by video ID and sorted newest-first before the limit is applied.
- Channel header card — optionally show the channel avatar, title and description above a channel gallery.
- Graceful bare-link fallback — a channel with no API key (or an empty result) degrades to a plain "YouTube channel" link instead of a broken block.
Display modes & templates
- Three display modes per gallery — inline
embed, thumbnaillightbox, orlink(opens on YouTube); the mode is honoured inside galleries, not just single videos. - Autoplay lightbox — thumbnails open a full-screen modal that autoplays the video; closes on the Close button or a backdrop click.
- Nine ready-made templates — Grid, List, Cinema (first video full-width), Compact (auto-fit tiles), Circles, Dark overlay, Flip cards (3D hover flip) and two circle grids (circular tiles with hover rotate) — no custom CSS required.
- Template aliases — friendly names map automatically (
default/cards→ grid,circle→ circles,flipcard→ flipcards, plus legacy variants), so imported or typo'd names still resolve. - Configurable columns — 1–6 responsive columns from settings (up to 12 via shortcode); legacy circle templates auto-default to 7 columns unless you set your own.
- Configurable gutter — control the gap between tiles from 0 to 48 px.
Frontend experience
- Fully responsive — CSS Grid with automatic breakpoints (2 columns under 760 px, 1 under 480 px; circle templates have their own tuned mobile grids).
- Load More pagination — show an initial batch and reveal the next set on click, keeping long galleries light on first paint.
- Per-gallery header — optional title bar with a live video count.
- Per-video titles and descriptions — toggle each on/off; descriptions are word-trimmed (
max_words) to keep cards tidy. - Lazy loading — thumbnails and iframes load lazily for faster pages.
- Zero external assets — all CSS and JS are injected inline once per page; no jQuery, no CDN, no bundled libraries, nothing extra to enqueue.
Authoring & editor integration
- Four interchangeable shortcodes —
gmcvideo,gmcvideohub,gmcyoutube,gmcyoutuber(Joomla curly-brace tokens in article text; WordPress square-bracket shortcodes). - Visual insert button — a toolbar/editor button drops a ready gallery snippet into a page without pasting embed code (Joomla editor-XTD button; WordPress classic-editor media button).
- Per-shortcode overrides — every site default (mode, template, columns, gutter, limit, page size, title/description, header) can be overridden inline on any single gallery.
- Silent legacy migration — old
#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; }


