Add query param color=white to (#1662)

mgurgel · web-flow · commit 193bd257df60 · 2025-05-02T11:24:19.000+01:00
* Added query param color=white

* Lint
diff --git a/special-pages/pages/duckplayer/app/embed-settings.js b/special-pages/pages/duckplayer/app/embed-settings.js
@@ -71,6 +71,7 @@ export class EmbedSettings {
 
         url.searchParams.set('rel', '0'); // shows related videos from the same channel as the video
         url.searchParams.set('modestbranding', '1'); // disables showing the YouTube logo in the video control bar
+        url.searchParams.set('color', 'white'); // Forces legacy YouTube player UI
 
         if (this.timestamp && this.timestamp.seconds > 0) {
             url.searchParams.set('start', String(this.timestamp.seconds)); // if timestamp supplied, start video at specific point
diff --git a/special-pages/pages/duckplayer/integration-tests/duck-player.js b/special-pages/pages/duckplayer/integration-tests/duck-player.js
@@ -5,9 +5,10 @@ import { perPlatform } from 'injected/integration-test/type-helpers.mjs';
 
 const MOCK_VIDEO_ID = 'VIDEO_ID';
 const MOCK_VIDEO_TITLE = 'Embedded Video - YouTube';
-const youtubeEmbed = (id) => 'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1';
+const youtubeEmbed = (id) =>
+    'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1&color=white';
 const youtubeEmbedIOS = (id) =>
-    'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&muted=1&rel=0&modestbranding=1';
+    'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&muted=1&rel=0&modestbranding=1&color=white';
 const html = {
     unsupported: `<html><head><title>${MOCK_VIDEO_TITLE}</title></head>
 <body>
diff --git a/special-pages/pages/duckplayer/unit-tests/embed-settings.mjs b/special-pages/pages/duckplayer/unit-tests/embed-settings.mjs
@@ -5,7 +5,7 @@ import { EmbedSettings } from '../app/embed-settings.js';
 describe('creates embed url', () => {
     it('handles duck scheme', () => {
         const actual = EmbedSettings.fromHref('duck://player/123')?.toEmbedUrl();
-        const expected = 'https://www.youtube-nocookie.com/embed/123?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1';
+        const expected = 'https://www.youtube-nocookie.com/embed/123?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1&color=white';
         deepEqual(actual, expected);
     });
     it('handles duck scheme with timestamp', () => {
@@ -15,6 +15,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
             start: '3723',
         };
         if (!actual) throw new Error('unreachable');
@@ -28,6 +29,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
             start: '3723',
         };
         if (!actual) throw new Error('unreachable');
@@ -41,6 +43,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
             start: '3723',
         };
         if (!actual) throw new Error('unreachable');
@@ -54,6 +57,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
         };
         if (!actual) throw new Error('unreachable');
         const asParams = Object.fromEntries(new URL(actual).searchParams);
@@ -67,6 +71,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
             muted: '1',
         };
         if (!actual) throw new Error('unreachable');
@@ -80,6 +85,7 @@ describe('creates embed url', () => {
             iv_load_policy: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
         };
         if (!actual) throw new Error('unreachable');
         const asParams = Object.fromEntries(new URL(actual).searchParams);
@@ -93,6 +99,7 @@ describe('creates embed url', () => {
             autoplay: '1',
             rel: '0',
             modestbranding: '1',
+            color: 'white',
         };
         if (!actual) throw new Error('unreachable');
         const asParams = Object.fromEntries(new URL(actual).searchParams);
