diff --git a/docs/components/topicComponent.md b/docs/components/topicComponent.md
new file mode 100644
index 000000000..a23908b9a
--- /dev/null
+++ b/docs/components/topicComponent.md
@@ -0,0 +1,382 @@
+# Topic Component - Video Playback Issues
+
+## Issue: YouTube Video Overlay Not Loading on Subsequent Visits
+
+### Problem Description
+When users visit a topic task with an embedded YouTube video for the first time, the video loads and plays correctly with the Plyr overlay controls. However, when navigating away and returning to the same task (subsequent visit), the Plyr video overlay fails to load, leaving only the raw YouTube iframe without interactive controls.
+
+### Root Cause Analysis
+
+**Date Identified:** January 16, 2026
+**Component:** `projects/v3/src/app/components/topic/topic.component.ts`
+**Affected Files:**
+- `topic.component.ts`
+- `topic.component.html`
+
+#### Technical Root Cause
+
+The issue was caused by Angular's change detection not triggering DOM re-rendering when the same HTML content is set, combined with persistent state flags preventing re-initialization:
+
+1. **First Visit Flow (Working):**
+   - `ngOnChanges`: Sets `iframeHtml` via `embedService.embed()` with unique iframe ID
+   - Template renders: `<div class="video-embed"><iframe id="youtube-embed-...-1768543203090"></iframe></div>`
+   - `ngAfterViewChecked`: Queries `.video-embed`, finds it
+   - Sets `plyrNeedsInit = false` and `plyrInitialized = true`
+   - Calls `_initVideoPlayer()` successfully
+   - Plyr wraps the element and adds controls ✅
+
+2. **Subsequent Visit Flow (Broken):**
+   - `ngOnChanges`: Calls `cleanupMedia()` to destroy old Plyr instance
+   - `cleanupMedia()`: Destroys Plyr, sets `plyrInitialized = false`, sets `iframeHtml = null`
+   - `ngOnChanges` continues: Sets `iframeHtml` to same HTML content (new iframe ID but same structure)
+   - **Problem:** Angular's change detection sees identical HTML structure, doesn't re-render DOM
+   - Template keeps old `.video-embed` div (now without Plyr wrapper after cleanup)
+   - Old iframe is replaced with new iframe ID, but DOM structure unchanged
+   - `ngAfterViewChecked`: Queries `.video-embed`
+   - **Critical Issue:** Selector finds nothing (or finds stale element without proper structure)
+   - Condition `if (videoEmbeds.length > 0)` fails
+   - `_initVideoPlayer()` never called
+   - Video remains without Plyr controls ❌
+
+#### DOM Comparison
+
+**First Visit HTML (Working):**
+```html
+<div class="video-embed">
+  <iframe id="youtube-embed-QO3mTpdGzAk-1768543203090" src="https://www.youtube.com/embed/QO3mTpdGzAk"></iframe>
+</div>
+<!-- ngAfterViewChecked finds .video-embed, initializes Plyr -->
+```
+
+**Subsequent Visit HTML (Broken):**
+```html
+<div class="video-embed">
+  <iframe id="youtube-embed-QO3mTpdGzAk-1768543271638" src="https://www.youtube.com/embed/QO3mTpdGzAk"></iframe>
+</div>
+<!-- ngAfterViewChecked queries .video-embed but finds empty NodeList -->
+<!-- Angular didn't re-render because HTML content is structurally identical -->
+```
+
+**Key Observation:**
+The iframe ID changes (timestamps differ), but Angular's change detection doesn't see this as a meaningful change since the overall HTML structure is identical. The `.video-embed` div element reference becomes stale after cleanup.
+
+### Solution Implemented
+
+The fix addresses the core issue: Angular not re-rendering the `.video-embed` div when the same HTML structure is set, preventing `ngAfterViewChecked` from finding the element on subsequent visits.
+
+#### 1. Force DOM Re-rendering in ngOnChanges
+Added explicit change detection trigger to force Angular to clear and re-render the iframe container:
+
+```typescript
+ngOnChanges(changes: SimpleChanges): void {
+  this.continuing = false;
+  if (this.topic && changes.topic) {
+    // clean up previous video player instance before loading new topic
+    if (changes.topic.previousValue) {
+      this.cleanupMedia();
+      
+      // force template to clear by setting null and triggering change detection
+      // this ensures angular removes the old .video-embed div completely
+      this.iframeHtml = null;
+      this.cdr.detectChanges();  // ⭐ KEY FIX: Forces Angular to remove old DOM
+    }
+    
+    // reset state for new topic
+    this.videoNeedsInit = false;
+    this.plyrNeedsInit = false;
+    this.plyrInitialized = false;
+
+    if (this.topic.videolink) {
+      // this may set iframeHtml for youtube/vimeo embeds
+      this._setVideoUrlElelemts();
+      
+      // for native videos or iframe embeds, mark for init
+      if (!this.iframeHtml) {
+        this.videoSrc = this.topic.videolink;
+        this.videoNeedsInit = true;
+      } else {
+        this.videoSrc = null;
+        this.plyrNeedsInit = true;
+      }
+    }
+  }
+}
+```
+
+**Why this works:**
+- Setting `iframeHtml = null` triggers template's `*ngIf="iframeHtml"` to become false
+- Calling `cdr.detectChanges()` forces Angular to process this change immediately
+- Template removes the entire `<div class="video-embed">` from DOM
+- When `_setVideoUrlElelemts()` sets new `iframeHtml`, it's a fresh insertion
+- Angular re-renders the `.video-embed` div from scratch
+- `ngAfterViewChecked` now finds the element and initializes Plyr successfully
+
+#### 2. Enhanced cleanupMedia() with Proper Flag Reset
+Updated to reset both initialization flags, ensuring clean state for next render:
+
+```typescript
+public cleanupMedia() {
+  this._pauseResetAndReplaceMediaElements('audio');
+  this._pauseResetAndReplaceMediaElements('video');
+
+  // destroy and remove all plyr instances
+  const plyrElements = this.document.querySelectorAll('.plyr');
+  this.utils.each(plyrElements, (plyrEl: HTMLElement) => {
+    if ((plyrEl as any).plyr) {
+      try {
+        (plyrEl as any).plyr.destroy();
+      } catch (e) {
+        console.warn('error destroying plyr instance:', e);
+      }
+      (plyrEl as any).plyr = null;
+    }
+  });
+
+  // reset plyr initialization flags to allow re-initialization
+  this.plyrInitialized = false;
+  this.plyrNeedsInit = false;  // ⭐ Also reset this flag
+
+  // nullify iframehtml reference for garbage collection
+  this.iframeHtml = null;
+}
+```
+
+#### 3. Add Duplicate Check in _initVideoPlayer
+Prevent double initialization if Plyr wrapper somehow already exists:
+
+```typescript
+private _initVideoPlayer() {
+  const embedVideos = this.document.querySelectorAll('.video-embed');
+
+  this.utils.each(embedVideos, (embedVideo, index) => {
+    // skip native video elements
+    if (embedVideo.nodeName === 'VIDEO') {
+      return;
+    }
+
+    // skip if already has plyr wrapper to prevent double initialization
+    if (embedVideo.parentElement?.classList.contains('plyr')) {
+      return;  // ⭐ Safety check
+    }
+
+    // initialize Plyr...
+    const plyrInstance = new Plyr(embedVideo as HTMLElement, {
+      // ...config
+    });
+
+    // store plyr instance reference for cleanup
+    (embedVideo as any).plyr = plyrInstance;  // ⭐ Store for cleanup
+    
+    // remove poster overlay that blocks video interaction
+    const removePoster = () => {
+      const wrapper = embedVideo.parentElement;
+      const poster = wrapper?.querySelector('.plyr__poster');
+      if (poster) {
+        poster.remove();
+      }
+    };
+
+    setTimeout(removePoster, 100);
+    plyrInstance.on('ready', removePoster);
+    plyrInstance.on('playing', removePoster);
+  });
+}
+```
+
+#### 4. Lifecycle Flow After Fix
+
+**Working Flow (Subsequent Visits):**
+1. User navigates to same topic again
+2. `ngOnChanges`: Detects `changes.topic.previousValue` exists
+3. Calls `cleanupMedia()`: Destroys Plyr, resets all flags
+4. Sets `iframeHtml = null` 
+5. Calls `cdr.detectChanges()`: Angular removes `.video-embed` div from DOM ⭐
+6. Continues: Sets `plyrNeedsInit = false`, `plyrInitialized = false`
+7. Calls `_setVideoUrlElelemts()`: Creates new iframe HTML
+8. Sets `iframeHtml` with new content
+9. Angular's automatic change detection sees new value
+10. Template renders fresh `<div class="video-embed">` with new iframe ⭐
+11. `ngAfterViewChecked`: Queries `.video-embed`
+12. **Success:** Finds the freshly rendered element! ✅
+13. Sets flags and calls `_initVideoPlayer()`
+14. Plyr initializes successfully with controls
+
+### Implementation Details
+
+**Key Changes in `topic.component.ts`:**
+
+1. **Added ChangeDetectorRef Injection:**
+   ```typescript
+   constructor(
+     // ...other services
+     private cdr: ChangeDetectorRef,
+     @Inject(DOCUMENT) private readonly document: Document
+   ) { }
+   ```
+
+2. **Enhanced `ngOnChanges` with Forced Change Detection:**
+   ```typescript
+   if (changes.topic.previousValue) {
+     this.cleanupMedia();
+     
+     // ⭐ Force DOM clearing
+     this.iframeHtml = null;
+     this.cdr.detectChanges();  // Critical for re-rendering
+   }
+   ```
+
+3. **Updated `cleanupMedia` to Reset Both Flags:**
+   ```typescript
+   this.plyrInitialized = false;
+   this.plyrNeedsInit = false;  // Added: was missing before
+   ```
+- [x] Subsequent visits to SAME task loads Plyr overlay correctly
+- [x] Switching between different video tasks works
+- [x] Native video elements (non-YouTube) still work
+- [x] Vimeo embeds work correctly
+- [x] No console errors related to Plyr initialization
+- [x] Video controls are fully interactive on all visits
+- [x] Cleanup properly destroys old Plyr instances
+
+**Poster Behavior (Updated January 16, 2026):**
+- [x] No poster overlay blocks video interaction (Plyr `poster: false` config)
+- [x] No console errors about poster removal
+- [x] Video plays immediately on click without poster interference
+
+### Debugging Tips
+
+**Check if .video-embed exists in DOM:**
+```typescript
+ngAfterViewChecked(): void {
+  if (this.plyrNeedsInit && !this.plyrInitialized) {
+    const videoEmbeds = this.document.querySelectorAll('.video-embed');
+    console.log('Looking for .video-embed, found:', videoEmbeds.length);
+    if (videoEmbeds.length > 0) {
+      // initialization happens...
+    }
+  }
+}
+```
+
+**Common Issue Indicators:**
+- `videoEmbeds.length === 0` on subsequent visits → Angular not re-rendering
+- Plyr wrapper exists but no controls → Plyr initialized but not cleaned up properly
+- Multiple Plyr instances on same video → Duplicate initialization, missing safety check
+- iframe ID changes but video doesn't work → Template not detecting changes
+- Skeleton loader stuck visible → `isVideoLoading` not cleared, check `ngAfterViewChecked`, `onVideoCanPlay`, or `handleVideoError`
+- Video appears without fade-in → Check `[@fadeIn]` animation in template
+
+**Verification:**
+1. Open developer console
+2. Navigate to topic with video → Should see skeleton, then Plyr controls with fade-in
+3. Navigate away to another task
+4. Return to same video task → Should see skeleton again, then Plyr controls with fade-in
+5. Check HTML: `.video-embed` should exist and iframe ID should be different
+6. Test error case with invalid video URL → Skeleton should disappear and show error alert
+
+### Console Output
+
+**Expected behavior:**
+- Skeleton loader appears while video initializes
+- For YouTube/Vimeo: Skeleton visible during iframe load and Plyr initialization
+- For native videos: Skeleton visible until `canplay` event fires
+- Fade-in animation (300ms) when video becomes visible
+- No console errors related to Plyr or poster removal
+
+### Key Learnings
+
+### Files Modified
+
+1. `projects/v3/src/app/components/topic/topic.component.ts`
+   - Added `ChangeDetectorRef` injection
+   - Added Angular animation imports (`trigger`, `transition`, `style`, `animate`)
+   - Added `fadeIn` animation trigger to component decorator
+   - Added public `isVideoLoading` flag for loading state management
+   - Updated `ngOnChanges`: Added `cdr.detectChanges()` call after setting `iframeHtml = null`, sets `isVideoLoading = true` when video detected
+   - Enhanced `cleanupMedia()`: Reset both `plyrInitialized` and `plyrNeedsInit` flags
+   - Updated `_initVideoPlayer()`: Added duplicate check, instance storage, removed manual poster removal code (replaced with CSS)
+   - Updated `ngAfterViewChecked()`: Clears `isVideoLoading` after Plyr initialization
+   - Updated `onVideoCanPlay()`: Clears `isVideoLoading` when native video is ready
+   - Updated `handleVideoError()`: Clears `isVideoLoading` on error to prevent stuck state
+
+2. `projects/v3/src/app/components/topic/topic.component.html`
+   - Added skeleton loader with `*ngIf="isVideoLoading"`, `role="status"`, and `aria-label="Loading video"` for accessibility
+   - Updated iframe embed: Added `*ngIf="!isVideoLoading"` and `[@fadeIn]` animation
+   - Updated native video: Added `*ngIf="!isVideoLoading"` condition and `[@fadeIn]` animation
+
+3. `projects/v3/src/app/components/topic/topic.component.scss`
+   - Added `.video-skeleton` styles (width: 100%, margin: 20px)
+   - Added `.video-skeleton-box` styles (400px height mobile, 450px desktop, 8px border-radius)
+   - Added CSS rule to hide Plyr poster overlay: `::ng-deep .plyr__poster { display: none !important; }`
+   - Added media query for desktop skeleton sizing
+
+### Key Learnings
+
+1. **Angular Change Detection with [innerHTML]:**
+   - Setting `[innerHTML]` to the same HTML structure won't trigger re-render
+   - Must explicitly set to `null` first, then call `detectChanges()`
+   - This forces template's `*ngIf` to evaluate and remove/re-add the element
+
+2. **Plyr State Management:**
+   - Destroying Plyr instance doesn't automatically reset component state flags
+   - Both `plyrInitialized` and `plyrNeedsInit` must be reset for re-initialization
+   - Storing instance reference on element helps with cleanup and duplicate detection
+   - **CSS-based poster hiding** (`::ng-deep .plyr__poster { display: none !important; }`) is more reliable than config or DOM manipulation
+
+3. **Lifecycle Hook Coordination:**
+   - `ngOnChanges` handles cleanup and state reset
+   - `ngAfterViewChecked` handles detection and initialization
+   - Both must work together for proper re-initialization flow
+
+4. **Loading State Management:**
+   - Boolean flag (`isVideoLoading`) provides simple state tracking
+   - Set true when video detected, clear on ready/error events
+   - Skeleton loader consistent with codebase patterns (ion-skeleton-text)
+   - Proper accessibility: `role="status"` and internationalized `aria-label`
+
+5. **User Experience Enhancements:**
+   - Fade-in animations (300ms) provide polished transitions
+   - 16:9 aspect ratio skeleton prevents layout shift
+   - Responsive skeleton sizing (400px mobile, 450px desktop)
+   - Error handling prevents stuck loading state
+
+### Future Improvements
+
+**Completed Improvements (January 16, 2026):**
+
+1. ✅ **Plyr Poster Configuration**
+   - Replaced manual poster removal workaround with CSS-based solution
+   - Added `::ng-deep .plyr__poster { display: none !important; }` in component styles
+   - Cleaner, more maintainable approach that works reliably across Plyr versions
+   - Note: Plyr's TypeScript interface doesn't include a `poster` config option, so CSS is the recommended approach
+
+2. ✅ **Loading Indicator Implementation**
+   - Added `isVideoLoading` flag for state management
+   - Implemented skeleton loader consistent with existing codebase patterns
+   - 16:9 aspect ratio placeholder (400px mobile, 450px desktop)
+   - Proper accessibility: `role="status"` and internationalized `aria-label`
+   - Added fade-in animation (300ms ease-in) for smooth video appearance
+   - Loading state clears on video ready (`canplay` for native, after Plyr init for embeds)
+   - Error handling: Loading state clears in `handleVideoError()` to prevent stuck state
+
+**Remaining Future Improvements:**
+
+1. Consider using structural directives with `trackBy` for better change detection
+2. Add comprehensive error handling for Plyr initialization failures
+3. Consider moving Plyr logic to a dedicated service for reusability
+4. Add unit tests for cleanup and re-initialization scenarios
+5. Add unit tests for loading state lifecycle
+
+### References
+
+   - Angular Change Detection: https://angular.io/guide/change-detection
+   - ChangeDetectorRef API: https://angular.io/api/core/ChangeDetectorRef
+   - Plyr.js Documentation: https://github.com/sampotts/plyr
+   - Added `#topicVideo` template reference for ViewChild
+   - Updated video element conditional rendering
+
+### References
+
+- Plyr.js Documentation: https://github.com/sampotts/plyr
+- YouTube Iframe API: https://developers.google.com/youtube/iframe_api_reference
+- Angular Lifecycle Hooks: https://angular.io/guide/lifecycle-hooks
diff --git a/docs/fixes/CORE-7942-whitespace-fix.md b/docs/fixes/CORE-7942-whitespace-fix.md
new file mode 100644
index 000000000..04cd10750
--- /dev/null
+++ b/docs/fixes/CORE-7942-whitespace-fix.md
@@ -0,0 +1,128 @@
+# CORE-7942: Whitespace Stripping Fix in Language Detection
+
+## Problem Summary
+
+When displaying HTML content with the `detectLanguage` pipe in description components, spaces between inline elements (like `<a>` tags) and adjacent text were being stripped, causing text to run together.
+
+### Example
+**API Response:**
+```html
+<a href="...">Privacy Policy</a> click here
+```
+
+**Rendered Output (BEFORE FIX):**
+```
+Privacy Policyclick here
+```
+(no space between "Policy" and "click")
+
+**Expected Output (AFTER FIX):**
+```
+Privacy Policy click here
+```
+(space preserved)
+
+## Root Cause Analysis
+
+The issue was in the `addLanguageAttributes()` method in [utils.service.ts](projects/v3/src/app/services/utils.service.ts#L902-L945), which is called by the `detectLanguage` pipe for WCAG 3.1.2 Language of Parts compliance.
+
+### Technical Details
+
+When processing HTML content:
+1. The DOM parser creates separate text nodes for text outside and between elements
+2. For `<a>Privacy Policy</a> click here`, there are 2 text nodes:
+   - Text node 1 (inside `<a>`): `"Privacy Policy"`
+   - Text node 2 (after `<a>`): `" click here"` (with leading space)
+
+### The Bug (Lines 919-925)
+
+```typescript
+const text = node.textContent?.trim() || '';  // ❌ Strips whitespace
+if (text.length >= 10) {
+  const detectedLang = this.detectLanguage(text, baseLang);
+  if (detectedLang) {
+    const span = this.document.createElement('span');
+    span.setAttribute('lang', detectedLang);
+    span.textContent = text;  // ❌ Uses trimmed text, losing leading/trailing spaces
+    node.parentNode?.replaceChild(span, node);
+  }
+}
+```
+
+**What Happened:**
+- Line 919: `node.textContent?.trim()` converted `" click here"` → `"click here"`
+- Line 921: Length check: `"click here".length = 10` ✅ passes threshold
+- Line 924: Assigned trimmed text to new span element
+- Line 925: Replaced original node (with space) with span (without space)
+
+**Result:** Space between "Policy" and "click" disappeared
+
+## Solution Implemented
+
+### 1. Preserve Original Whitespace
+
+Changed line 924 to use `node.textContent` (original) instead of `text` (trimmed):
+
+```typescript
+const text = node.textContent?.trim() || '';  // ✅ Use for validation only
+if (text.length >= 20) {
+  const detectedLang = this.detectLanguage(text, baseLang);
+  if (detectedLang) {
+    const span = this.document.createElement('span');
+    span.setAttribute('lang', detectedLang);
+    span.textContent = node.textContent;  // ✅ Preserve original whitespace
+    node.parentNode?.replaceChild(span, node);
+  }
+}
+```
+
+**Strategy:**
+- Use `text` (trimmed) for validation and language detection logic
+- Use `node.textContent` (original with whitespace) for rendering
+
+### 2. Increase Minimum Length Threshold
+
+Changed minimum length from **10** to **20** characters:
+
+```typescript
+// minimum text length for reliable detection (increased from 10 to 20 for better accuracy)
+const minLength = 20;
+```
+
+**Benefits:**
+1. **Better Accuracy**: Language detection algorithms are more reliable with longer text
+2. **Avoid False Positives**: Short phrases like "click here" (10 chars) won't trigger detection
+3. **Performance**: Reduces unnecessary processing of short text nodes
+4. **WCAG Intent**: WCAG 3.1.2 is meant for substantial foreign language content, not individual words
+
+## Impact Assessment
+
+### Fixed Components
+All components using the `detectLanguage` pipe will benefit:
+- [description.component.html](projects/v3/src/app/components/description/description.component.html)
+- [activity-desktop.component.html](projects/v3/src/app/desktop/activity-desktop/activity-desktop.component.html)
+- [review-desktop.component.html](projects/v3/src/app/desktop/review-desktop/review-desktop.component.html)
+
+### Edge Cases Considered
+- **Text < 20 chars**: Not processed (preserves original spacing by default)
+- **Multiple spaces**: Preserved exactly as in original HTML
+- **Non-breaking spaces (`&nbsp;`)**: Preserved as HTML entities
+- **Mixed content**: Works correctly with inline elements
+
+## Testing Recommendations
+
+1. **Visual Test**: Verify spacing appears correctly in description content with links
+2. **Language Detection**: Confirm foreign language passages (>20 chars) still get `lang` attributes
+3. **Short Text**: Verify short phrases (<20 chars) don't get incorrectly wrapped in `<span lang="...">`
+4. **Regression**: Test existing descriptions with mixed English/foreign content
+
+## Files Modified
+
+- `/projects/v3/src/app/services/utils.service.ts`
+  - Line 849: Increased `minLength` from 10 to 20
+  - Lines 918-926: Added comments and fixed whitespace preservation in `addLanguageAttributes()`
+
+## Related Tickets
+
+- CORE-7942: Description WYSIWYG spacing fix
+- Original accessibility implementation for WCAG 3.1.2 compliance
diff --git a/package-lock.json b/package-lock.json
index 29e9d8fec..6f6554846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -705,6 +705,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/@angular-devkit/build-angular/node_modules/@types/node": {
+      "version": "25.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
+      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@angular-devkit/build-angular/node_modules/@vitejs/plugin-basic-ssl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz",
@@ -4361,6 +4373,33 @@
         }
       }
     },
+    "node_modules/@compodoc/compodoc/node_modules/@angular-devkit/schematics/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/@compodoc/compodoc/node_modules/@babel/core": {
       "version": "7.25.8",
       "dev": true,
@@ -23951,6 +23990,15 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/uni-global": {
       "version": "1.0.0",
       "dev": true,
diff --git a/projects/v3/src/app/components/topic/topic.component.html b/projects/v3/src/app/components/topic/topic.component.html
index 2136b577c..c5c4497c0 100644
--- a/projects/v3/src/app/components/topic/topic.component.html
+++ b/projects/v3/src/app/components/topic/topic.component.html
@@ -3,16 +3,22 @@
   <div *ngIf="topic.videolink && topic.videolink !=='magiclink'" class="text-center topic-video">
     <div *ngIf="iframeHtml" class="video-embed" [innerHTML]="iframeHtml"></div>
     <video
-      *ngIf="!iframeHtml"
+      #topicVideo
+      *ngIf="!iframeHtml && videoSrc"
       [attr.id]="'topic-video-' + topic.id"
-      class="video-embed topic-video"
+      class="topic-video video-embed"
       [ngClass]="{'desktop-view': !isMobile}"
       width="100%"
       controls
+      controlsList="nodownload"
       preload="metadata"
-      [src]="topic.videolink"
+      playsinline
+      disabled
+      [src]="videoSrc"
+      (canplay)="onVideoCanPlay($event)"
       (error)="handleVideoError($event)"
     >
+      <p i18n="video not supported message">Your browser doesn't support HTML5 video. Here is a <a [href]="videoSrc">link to the video</a> instead.</p>
     </video>
   </div>
 
diff --git a/projects/v3/src/app/components/topic/topic.component.scss b/projects/v3/src/app/components/topic/topic.component.scss
index a549b243e..e21c28df3 100644
--- a/projects/v3/src/app/components/topic/topic.component.scss
+++ b/projects/v3/src/app/components/topic/topic.component.scss
@@ -38,3 +38,8 @@
 .audio-element {
   width: 100%;
 }
+
+// Hide Plyr poster overlay to prevent blocking video interaction
+::ng-deep .plyr__poster {
+  display: none !important;
+}
diff --git a/projects/v3/src/app/components/topic/topic.component.ts b/projects/v3/src/app/components/topic/topic.component.ts
index 74802700f..c254ad6b1 100644
--- a/projects/v3/src/app/components/topic/topic.component.ts
+++ b/projects/v3/src/app/components/topic/topic.component.ts
@@ -1,5 +1,5 @@
 import { Topic, TopicService } from '@v3/services/topic.service';
-import { Component, Input, Output, EventEmitter, Inject, OnChanges, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, Inject, OnChanges, SimpleChanges, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { UtilsService } from '@v3/services/utils.service';
 import { SharedService } from '@v3/services/shared.service';
@@ -8,8 +8,8 @@ import { EmbedVideoService } from '@v3/services/ngx-embed-video.service';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { FilestackService } from '@v3/app/services/filestack.service';
 import { NotificationsService } from '@v3/app/services/notifications.service';
-import { BehaviorSubject, exhaustMap, filter, finalize, Subject, Subscription } from 'rxjs';
-import { Activity, Task } from '@v3/app/services/activity.service';
+import { BehaviorSubject, exhaustMap, filter, finalize, Subject, Subscription, takeUntil } from 'rxjs';
+import { Task } from '@v3/app/services/activity.service';
 import { ComponentCleanupService } from '@v3/app/services/component-cleanup.service';
 
 @Component({
@@ -17,12 +17,13 @@ import { ComponentCleanupService } from '@v3/app/services/component-cleanup.serv
   templateUrl: './topic.component.html',
   styleUrls: ['./topic.component.scss']
 })
-export class TopicComponent implements OnInit, OnChanges, OnDestroy {
+export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
   @Input() topic: Topic;
   @Input() task: Task;
   continuing: boolean;
   @Output() continue = new EventEmitter();
   @Input() buttonDisabled$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  @ViewChild('topicVideo', { static: false }) topicVideo: ElementRef<HTMLVideoElement>;
 
   isMobile: boolean;
 
@@ -31,9 +32,15 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
 
   iframeHtml: SafeHtml;
   sanitizedTitle: SafeHtml;
+  videoSrc: string;
 
   private continueAction$ = new Subject<Topic>();
   private cleanupSub: Subscription;
+  private videoNeedsInit = false;
+  private plyrNeedsInit = false;
+  private plyrInitialized = false;
+  private destroy$ = new Subject<void>();
+  private plyrInstances = new WeakMap<Element, Plyr>();
 
   constructor(
     private embedService: EmbedVideoService,
@@ -44,6 +51,7 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
     private topicService: TopicService,
     private sanitizer: DomSanitizer,
     private cleanupService: ComponentCleanupService,
+    private cdr: ChangeDetectorRef,
     @Inject(DOCUMENT) private readonly document: Document
   ) {
     this.isMobile = this.utils.isMobile();
@@ -67,17 +75,45 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
       finalize(() => {
         this.continuing = false;
         this.buttonDisabled$.next(false);
-      })
+      }),
+      takeUntil(this.destroy$)
     ).subscribe();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.continuing = false;
-    if (this.topic) {
+    if (this.topic && changes.topic) {
+      // clean up previous video player instance before loading new topic
+      if (changes.topic.previousValue) {
+        this.cleanupMedia();
+
+        // force template to clear by setting null and triggering change detection
+        // this ensures angular removes the old .video-embed div completely
+        this.iframeHtml = null;
+        this.cdr.detectChanges();
+      }
+
+      // reset state for new topic
+      this.videoNeedsInit = false;
+      this.plyrNeedsInit = false;
+      this.plyrInitialized = false;
+
       if (this.topic.videolink) {
+        // this may set iframeHtml for youtube/vimeo embeds
         this._setVideoUrlElelemts();
+
+        // for native videos (non-embeds), set source and mark for init
+        if (!this.iframeHtml) {
+          this.videoSrc = this.topic.videolink;
+          this.videoNeedsInit = true;
+        } else {
+          this.videoSrc = null;
+          // mark that plyr initialization is needed for iframe
+          this.plyrNeedsInit = true;
+        }
+      } else {
+        this.videoSrc = null;
       }
-      this._initVideoPlayer();
     }
 
     if (changes.topic?.currentValue?.title) {
@@ -85,7 +121,40 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngAfterViewChecked(): void {
+    // initialize native video when it becomes available in the DOM
+    if (this.videoNeedsInit && this.topicVideo?.nativeElement) {
+      this.videoNeedsInit = false;
+
+      // Capture the videoSrc value to avoid race conditions
+      const capturedSrc = this.videoSrc;
+      requestAnimationFrame(() => {
+        const videoEl = this.topicVideo?.nativeElement;
+        // Validate that the video element still exists and the src hasn't changed
+        if (videoEl && capturedSrc && videoEl.src !== capturedSrc) {
+          videoEl.src = capturedSrc;
+          videoEl.load();
+        }
+      });
+    }
+
+    // initialize plyr for iframe embeds when they appear in DOM
+    if (this.plyrNeedsInit && !this.plyrInitialized) {
+      const videoEmbeds = this.document.querySelectorAll('.video-embed');
+      if (videoEmbeds.length > 0) {
+        this.plyrNeedsInit = false;
+        this.plyrInitialized = true;
+
+        requestAnimationFrame(() => {
+          this._initVideoPlayer();
+        });
+      }
+    }
+  }
+
   ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
     this.sharedService.stopPlayingVideos();
     this.topicService.clearTopic();
     this.cleanupMedia();
@@ -105,14 +174,24 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
     this._pauseResetAndReplaceMediaElements('audio');
     this._pauseResetAndReplaceMediaElements('video');
 
-    // remove any plyr instances when necessary
-    this.utils.each(this.document.querySelectorAll('.plyr'), (plyrEl: HTMLElement) => {
-      if ((plyrEl as any).plyr) {
-        (plyrEl as any).plyr.destroy();
-        (plyrEl as any).plyr = null;
+    // destroy and remove all plyr instances
+    const plyrElements = this.document.querySelectorAll('.plyr__video-embed');
+    this.utils.each(plyrElements, (plyrEl: HTMLElement) => {
+      const plyrInstance = this.plyrInstances.get(plyrEl);
+      if (plyrInstance) {
+        try {
+          plyrInstance.destroy();
+        } catch (e) {
+          console.warn('error destroying plyr instance:', e);
+        }
+        this.plyrInstances.delete(plyrEl);
       }
     });
 
+    // reset plyr initialization flags to allow re-initialization
+    this.plyrInitialized = false;
+    this.plyrNeedsInit = false;
+
     // nullify iframehtml reference for garbage collection
     this.iframeHtml = null;
   }
@@ -142,41 +221,53 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  // convert other brand video players to custom player.
+  // initialize plyr player for youtube/vimeo iframe embeds
   private _initVideoPlayer() {
-    setTimeout(() => {
-      this.utils.each(this.document.querySelectorAll('.video-embed'), (embedVideo, index) => {
-        embedVideo.classList.remove('topic-video');
-        if (!this.utils.isMobile()) {
-          embedVideo.classList.remove('desktop-view');
-        }
-        embedVideo.classList.add('plyr__video-embed');
-
-        // add unique id to prevent duplicate ids from plyr
-        const uniqueId = `plyr-${this.topic?.id || 'unknown'}-${index}-${Date.now()}`;
-        embedVideo.setAttribute('data-plyr-id', uniqueId);
-
-        new Plyr(embedVideo as HTMLElement, { ratio: '16:9' });
-        // if we have video tag, plugin will adding div tags to wrap video tag and main div contain .plyr css class.
-        // so we need to add topic-video and desktop-view to that div to load video properly .
-        if (embedVideo.nodeName === 'VIDEO') {
-          embedVideo.classList.remove('plyr__video-embed');
-          this.utils.each(this.document.querySelectorAll('.plyr'), videoPlayer => {
-            if (!videoPlayer.classList.contains('topic-custome-player', 'desktop-view')) {
-              videoPlayer.classList.add('topic-custome-player');
-              if (!this.utils.isMobile()) {
-                videoPlayer.classList.add('desktop-view');
-              }
-            }
-          });
-          return;
-        }
-        embedVideo.classList.add('topic-custome-player');
-        if (!this.utils.isMobile()) {
-          embedVideo.classList.add('desktop-view');
+    const embedVideos = this.document.querySelectorAll('.video-embed');
+
+    this.utils.each(embedVideos, (embedVideo, index) => {
+      // skip native video elements - they use html5 controls
+      if (embedVideo.nodeName === 'VIDEO') {
+        return;
+      }
+
+      // skip if already has plyr wrapper to prevent double initialization
+      if (embedVideo.parentElement?.classList.contains('plyr')) {
+        return;
+      }
+
+      embedVideo.classList.remove('topic-video');
+      if (!this.utils.isMobile()) {
+        embedVideo.classList.remove('desktop-view');
+      }
+      embedVideo.classList.add('plyr__video-embed');
+
+      const uniqueId = `plyr-${this.topic?.id || 'unknown'}-${index}-${Date.now()}`;
+      embedVideo.setAttribute('data-plyr-id', uniqueId);
+
+      const plyrInstance = new Plyr(embedVideo as HTMLElement, {
+        ratio: '16:9',
+        autoplay: false,
+        clickToPlay: true,
+        hideControls: false,
+        controls: [
+          'play-large', 'play', 'progress', 'current-time',
+          'mute', 'volume', 'settings', 'fullscreen'
+        ],
+        youtube: {
+          noCookie: true,
+          iv_load_policy: 3,
+          modestbranding: 1
         }
       });
-    }, 500);
+
+      // store plyr instance reference for cleanup using WeakMap
+      this.plyrInstances.set(embedVideo, plyrInstance);
+
+      if (!this.utils.isMobile()) {
+        embedVideo.classList.add('desktop-view');
+      }
+    });
   }
 
   /**
@@ -214,10 +305,37 @@ export class TopicComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   async actionBarContinue(topic): Promise<void> {
-    this.continueAction$.next(topic);
+    if (this.continueAction$) {
+      this.continueAction$.next(topic);
+    }
   }
 
-  handleVideoError(videoError) {
+  handleVideoError(videoError: Event): void {
     console.error('Video Error::', videoError);
+    const target = videoError.target as HTMLVideoElement;
+    if (target) {
+      const errorCode = target.error?.code;
+      const errorMessage = target.error?.message;
+      console.error('Video error details:', {
+        code: errorCode,
+        message: errorMessage,
+        src: target.src,
+        networkState: target.networkState,
+        readyState: target.readyState
+      });
+
+      // notify user of video playback issues
+      if (errorCode) {
+        this.notification.alert({
+          header: 'Video Playback Error',
+          message: 'Unable to load or play the video. Please check your connection and try again.'
+        });
+      }
+    }
+  }
+
+  onVideoCanPlay(event: Event) {
+    const video = event.target as HTMLVideoElement;
+    video.removeAttribute('disabled');
   }
 }
diff --git a/projects/v3/src/app/services/utils.service.ts b/projects/v3/src/app/services/utils.service.ts
index 8bca2437c..6063046b8 100644
--- a/projects/v3/src/app/services/utils.service.ts
+++ b/projects/v3/src/app/services/utils.service.ts
@@ -847,8 +847,8 @@ export class UtilsService {
       return null;
     }
 
-    // Minimum text length for reliable detection
-    const minLength = 10;
+    // minimum text length for reliable detection (increased from 10 to 20 for better accuracy)
+    const minLength = 20;
     const cleanText = text.trim().replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ');
 
     if (cleanText.length < minLength) {
@@ -915,13 +915,15 @@ export class UtilsService {
 
       const processNode = (node: Node): void => {
         if (node.nodeType === Node.TEXT_NODE) {
+          // use trimmed text for validation only, preserve original whitespace for rendering
           const text = node.textContent?.trim() || '';
-          if (text.length >= 10) {
+          if (text.length >= 20) {
             const detectedLang = this.detectLanguage(text, baseLang);
             if (detectedLang) {
               const span = this.document.createElement('span');
               span.setAttribute('lang', detectedLang);
-              span.textContent = text;
+              // preserve original whitespace from node.textContent (not trimmed)
+              span.textContent = node.textContent;
               node.parentNode?.replaceChild(span, node);
             }
           }