# 03-Jan-2026 — YouTube and Albums [#103](https://github.com/nbarrett/ngx-ramblers/issues/103)

## [build 405](https://github.com/nbarrett/ngx-ramblers/actions/runs/20684288180) — [commit ac867ec](https://github.com/nbarrett/ngx-ramblers/commit/ac867ec1fb4bbf4ccbd757fe9e7224bbb85a7369)
_____

- Added ability to embed YouTube videos across albums, carousels, and pages with centralised service architecture and automatic playback pausing.
- 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.


### About This Release

**YouTube Embedding Foundation:**
- Created reusable YoutubeEmbed component for privacy-enhanced video embedding
- Extended ContentMetadata, ContentText, and PageContent models with youtubeId field
- Updated album gallery and grid views to display YouTube videos alongside images
- Enhanced carousel editor to support adding YouTube videos to image lists
- Added YouTube embedding support to dynamic content pages
- Provided CMS migration scripts to convert existing YouTube links to embedded videos
- Auto-generate thumbnail from YouTube if no custom image provided

**Centralized Service Architecture:**
- Created youtube.model.ts with YouTubeDomain and YouTubeQuality enums for type-safe constants
- Implemented centralized YouTubeService with embedUrl() and thumbnailUrl() methods
- Refactored 5 files to use YouTubeService (location-extraction, index, card-editor, album-gallery, youtube-embed)
- Eliminated all hardcoded YouTube URLs across codebase

**Playback Pausing — Carousel:**
- Upgraded youtube-embed.ts to use official YouTube IFrame Player API
- Dynamically load iframe_api and create YT.Player instances
- Emit playbackStateChange events on video play/pause
- Carousel component listens to events and pauses auto-advance via noPause flag

**Playback Pausing — Gallery:**
- Implemented bidirectional postMessage communication with YouTube IFrame API
- Search document-wide for YouTube iframes (ng-gallery renders globally)
- Detect playing state and call galleryRef.stop() to pause slideshow
- Auto-resume slideshow with galleryRef.play() when video stops

**Carousel UI Improvements:**
- Added duplicate image list functionality with inline input and confirm/cancel buttons
- Improved button layouts from vertical stack to horizontal inline
- Enhanced carousel editor UX for managing image lists with YouTube videos