From af371b9d896fecbfaab894420364fbaa2a939b83 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Wed, 8 Apr 2026 14:25:44 -0500
Subject: [PATCH] Fix YouTube embed error 153 - add mute, origin, and
 enablejsapi params

- Add mute=1, enablejsapi=1, and origin params to YouTube embed URLs
- Fix applies at creation time (content route) and playback time (player)
- Existing YouTube content gets fixed params via fixYoutubeUrl() helper
- Also fixes content library preview iframe

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/js/views/content-library.js |  2 +-
 server/player/index.html             | 14 ++++++++++++--
 server/routes/content.js             |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/js/views/content-library.js b/frontend/js/views/content-library.js
index 3049c96..fc9c16c 100644
--- a/frontend/js/views/content-library.js
+++ b/frontend/js/views/content-library.js
@@ -473,7 +473,7 @@ function showPreview(content) {
       <button style="position:absolute;top:8px;right:8px;z-index:1;background:rgba(0,0,0,0.7);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer" id="closePreview">&times;</button>
       <div style="max-width:80vw;max-height:80vh">
         ${isYoutube
-          ? `<iframe src="${src}" style="width:80vw;height:45vw;max-height:80vh;display:block;border:none" allow="autoplay;encrypted-media" allowfullscreen></iframe>`
+          ? `<iframe src="${(() => { try { const u = new URL(src); if (!u.searchParams.has('mute')) u.searchParams.set('mute','1'); if (!u.searchParams.has('enablejsapi')) u.searchParams.set('enablejsapi','1'); if (!u.searchParams.has('origin')) u.searchParams.set('origin', window.location.origin); return u.toString(); } catch { return src; } })()}" style="width:80vw;height:45vw;max-height:80vh;display:block;border:none" allow="autoplay;encrypted-media" allowfullscreen></iframe>`
           : isVideo
             ? `<video src="${src}" controls autoplay style="max-width:80vw;max-height:80vh;display:block"></video>`
             : `<img src="${src}" style="max-width:80vw;max-height:80vh;display:block">`
diff --git a/server/player/index.html b/server/player/index.html
index d11f640..190004a 100644
--- a/server/player/index.html
+++ b/server/player/index.html
@@ -504,6 +504,16 @@
     }
 
     // ==================== Content Rendering ====================
+    function fixYoutubeUrl(url) {
+      try {
+        const u = new URL(url);
+        if (!u.searchParams.has('mute')) u.searchParams.set('mute', '1');
+        if (!u.searchParams.has('enablejsapi')) u.searchParams.set('enablejsapi', '1');
+        if (!u.searchParams.has('origin')) u.searchParams.set('origin', window.location.origin);
+        return u.toString();
+      } catch { return url; }
+    }
+
     function renderContent(item) {
       const container = document.getElementById('playerContainer');
       container.style.display = 'block';
@@ -522,7 +532,7 @@
         // Fullscreen
         if (isYoutube) {
           const iframe = document.createElement('iframe');
-          iframe.src = src;
+          iframe.src = fixYoutubeUrl(src);
           iframe.allow = 'autoplay; encrypted-media';
           iframe.allowFullscreen = true;
           iframe.style.cssText = 'width:100%;height:100%;border:none;background:#000';
@@ -584,7 +594,7 @@
           div.appendChild(iframe);
         } else if (isYoutubeZone) {
           const iframe = document.createElement('iframe');
-          iframe.src = src;
+          iframe.src = fixYoutubeUrl(src);
           iframe.allow = 'autoplay; encrypted-media';
           iframe.allowFullscreen = true;
           iframe.style.cssText = 'width:100%;height:100%;border:none';
diff --git a/server/routes/content.js b/server/routes/content.js
index 6e4eb84..b86d854 100644
--- a/server/routes/content.js
+++ b/server/routes/content.js
@@ -150,7 +150,7 @@ router.post('/youtube', (req, res) => {
     if (!videoId) return res.status(400).json({ error: 'Invalid YouTube URL' });
 
     const id = uuidv4();
-    const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0&rel=0&modestbranding=1&loop=1&playlist=${videoId}`;
+    const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&controls=0&rel=0&modestbranding=1&loop=1&playlist=${videoId}&enablejsapi=1&origin=${encodeURIComponent(req.protocol + '://' + req.get('host'))}`;
     const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
     const filename = name || `YouTube: ${videoId}`;