{"id":"695930db9a6ad5c359ebbcb7","title":"2026 01 03 Issue 103","path":"how-to/committee/release-notes/2026-01-03-issue-103","contentMarkdown":"# 03-Jan-2026 — YouTube and Albums [#103](https://github.com/nbarrett/ngx-ramblers/issues/103)\n\n## [build 405](https://github.com/nbarrett/ngx-ramblers/actions/runs/20684288180) — [commit ac867ec](https://github.com/nbarrett/ngx-ramblers/commit/ac867ec1fb4bbf4ccbd757fe9e7224bbb85a7369)\n_____\n\n- Added ability to embed YouTube videos across albums, carousels, and pages with centralised service architecture and automatic playback pausing.\n- Brief description is provided below, but see [here](https://ngx-ramblers.org.uk/how-to/committee/editing-content/example-pages/albums/youtube-videos) to find out about all the different ways to add video content.\n\n\n### About This Release\n\n**YouTube Embedding Foundation:**\n- Created reusable YoutubeEmbed component for privacy-enhanced video embedding\n- Extended ContentMetadata, ContentText, and PageContent models with youtubeId field\n- Updated album gallery and grid views to display YouTube videos alongside images\n- Enhanced carousel editor to support adding YouTube videos to image lists\n- Added YouTube embedding support to dynamic content pages\n- Provided CMS migration scripts to convert existing YouTube links to embedded videos\n- Auto-generate thumbnail from YouTube if no custom image provided\n\n**Centralized Service Architecture:**\n- Created youtube.model.ts with YouTubeDomain and YouTubeQuality enums for type-safe constants\n- Implemented centralized YouTubeService with embedUrl() and thumbnailUrl() methods\n- Refactored 5 files to use YouTubeService (location-extraction, index, card-editor, album-gallery, youtube-embed)\n- Eliminated all hardcoded YouTube URLs across codebase\n\n**Playback Pausing — Carousel:**\n- Upgraded youtube-embed.ts to use official YouTube IFrame Player API\n- Dynamically load iframe_api and create YT.Player instances\n- Emit playbackStateChange events on video play/pause\n- Carousel component listens to events and pauses auto-advance via noPause flag\n\n**Playback Pausing — Gallery:**\n- Implemented bidirectional postMessage communication with YouTube IFrame API\n- Search document-wide for YouTube iframes (ng-gallery renders globally)\n- Detect playing state and call galleryRef.stop() to pause slideshow\n- Auto-resume slideshow with galleryRef.play() when video stops\n\n**Carousel UI Improvements:**\n- Added duplicate image list functionality with inline input and confirm/cancel buttons\n- Improved button layouts from vertical stack to horizontal inline\n- Enhanced carousel editor UX for managing image lists with YouTube videos","contentHtml":"<h1>03-Jan-2026 — YouTube and Albums <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/103\">#103</a></h1>\n<h2><a href=\"https://github.com/nbarrett/ngx-ramblers/actions/runs/20684288180\">build 405</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/commit/ac867ec1fb4bbf4ccbd757fe9e7224bbb85a7369\">commit ac867ec</a></h2>\n<hr>\n<ul>\n<li>Added ability to embed YouTube videos across albums, carousels, and pages with centralised service architecture and automatic playback pausing.</li>\n<li>Brief description is provided below, but see <a href=\"https://ngx-ramblers.org.uk/how-to/committee/editing-content/example-pages/albums/youtube-videos\">here</a> to find out about all the different ways to add video content.</li>\n</ul>\n<h3>About This Release</h3>\n<p><strong>YouTube Embedding Foundation:</strong></p>\n<ul>\n<li>Created reusable YoutubeEmbed component for privacy-enhanced video embedding</li>\n<li>Extended ContentMetadata, ContentText, and PageContent models with youtubeId field</li>\n<li>Updated album gallery and grid views to display YouTube videos alongside images</li>\n<li>Enhanced carousel editor to support adding YouTube videos to image lists</li>\n<li>Added YouTube embedding support to dynamic content pages</li>\n<li>Provided CMS migration scripts to convert existing YouTube links to embedded videos</li>\n<li>Auto-generate thumbnail from YouTube if no custom image provided</li>\n</ul>\n<p><strong>Centralized Service Architecture:</strong></p>\n<ul>\n<li>Created youtube.model.ts with YouTubeDomain and YouTubeQuality enums for type-safe constants</li>\n<li>Implemented centralized YouTubeService with embedUrl() and thumbnailUrl() methods</li>\n<li>Refactored 5 files to use YouTubeService (location-extraction, index, card-editor, album-gallery, youtube-embed)</li>\n<li>Eliminated all hardcoded YouTube URLs across codebase</li>\n</ul>\n<p><strong>Playback Pausing — Carousel:</strong></p>\n<ul>\n<li>Upgraded youtube-embed.ts to use official YouTube IFrame Player API</li>\n<li>Dynamically load iframe_api and create YT.Player instances</li>\n<li>Emit playbackStateChange events on video play/pause</li>\n<li>Carousel component listens to events and pauses auto-advance via noPause flag</li>\n</ul>\n<p><strong>Playback Pausing — Gallery:</strong></p>\n<ul>\n<li>Implemented bidirectional postMessage communication with YouTube IFrame API</li>\n<li>Search document-wide for YouTube iframes (ng-gallery renders globally)</li>\n<li>Detect playing state and call galleryRef.stop() to pause slideshow</li>\n<li>Auto-resume slideshow with galleryRef.play() when video stops</li>\n</ul>\n<p><strong>Carousel UI Improvements:</strong></p>\n<ul>\n<li>Added duplicate image list functionality with inline input and confirm/cancel buttons</li>\n<li>Improved button layouts from vertical stack to horizontal inline</li>\n<li>Enhanced carousel editor UX for managing image lists with YouTube videos</li>\n</ul>\n"}