From 730c79ac0682a8cf73107a8b9efd27a45e458c3c Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Mon, 16 Mar 2026 15:47:36 +0000
Subject: [PATCH 1/2] WPD-207: Replace URLs for vimeo and youtube pages with
 the related embed iframe URLS

---
 src/util/test/video.spec.ts | 49 +++++++++++++++++++++++++++++++++++++
 src/util/video.ts           | 18 ++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/util/test/video.spec.ts

diff --git a/src/util/test/video.spec.ts b/src/util/test/video.spec.ts
new file mode 100644
index 00000000..6feb02d2
--- /dev/null
+++ b/src/util/test/video.spec.ts
@@ -0,0 +1,49 @@
+import { VideoService } from '../video';
+
+describe('VideoService', () => {
+  describe('getEmbedHtml', () => {
+    it('should return a YouTube embed iframe for a YouTube watch URL with alphanumeric ID', () => {
+      const url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+      const expected = '<iframe loading="lazy" src="https://youtube.com/embed/dQw4w9WgXcQ"></iframe>';
+      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    });
+
+    it('should return a Vimeo player iframe for a Vimeo URL with numeric ID', () => {
+      const url = 'https://vimeo.com/123456789';
+      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
+      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    });
+
+    it('should return a generic YouTube iframe for other YouTube URLs', () => {
+      const url = 'https://youtube.com/some/other/path';
+      const expected = `<iframe loading="lazy" src="${url}"></iframe>`;
+      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    });
+
+    it('should return a generic Vimeo iframe with title for Vimeo Player URLs', () => {
+      const url = 'https://player.vimeo.com/video/123456789';
+      const title = 'My Video';
+      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="${title}"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
+      expect(VideoService.getEmbedHtml(url, title)).toBe(expected);
+    });
+
+    it('should return a generic Vimeo iframe without title for Vimeo Player URLs when title is null', () => {
+      const url = 'https://player.vimeo.com/video/123456789';
+      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
+      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    });
+
+    it('should return a generic Vimeo iframe without title for Vimeo Player URLs when title is empty', () => {
+      const url = 'https://player.vimeo.com/video/123456789';
+      const title = '';
+      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
+      expect(VideoService.getEmbedHtml(url, title)).toBe(expected);
+    });
+
+    it('should return a video tag for other URLs', () => {
+      const url = 'https://example.com/video.mp4';
+      const expected = `<video controls src="${url}"></video>`;
+      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    });
+  });
+});
diff --git a/src/util/video.ts b/src/util/video.ts
index 405dacec..7f1fc86c 100644
--- a/src/util/video.ts
+++ b/src/util/video.ts
@@ -1,5 +1,7 @@
 export class VideoService {
   static getEmbedHtml(url: string, title: string | null) {
+    url = this.replacePageURLwithEmbedURL(url);
+
     if (url.match(/youtube\.com/g)) {
       return `<iframe loading="lazy" src="${url}"></iframe>`;
     } else if (url.match(/player\.vimeo\.com/g)) {
@@ -9,4 +11,20 @@ export class VideoService {
       return `<video controls src="${url}"></video>`;
     }
   }
+
+  /**
+   * If the user supplied a URL to view a page video in a page on youtube or vimeo,
+   * we replace it with the URL to the related embedabble iframe.
+   */
+  private static replacePageURLwithEmbedURL(url: string) {
+    let YoutubeMatch: RegExpMatchArray | null = null;
+    let VimeoMatch: RegExpMatchArray | null = null;
+
+    if ((YoutubeMatch = url.match(/youtube.com\/watch\?v=([a-zA-Z0-9]+)/))) {
+      url = `https://youtube\.com/embed/${YoutubeMatch[1]}`;
+    } else if ((VimeoMatch = url.match(/vimeo.com\/([0-9]+)/))) {
+      url = `https://player\.vimeo\.com/video/${VimeoMatch[1]}`;
+    }
+    return url;
+  }
 }

From bc9d99965155ad23d8f31c8bc4118324fe3ebfd1 Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Mon, 23 Mar 2026 13:02:58 +0000
Subject: [PATCH 2/2] WPD-207: Refactor: Adjust test to parameterise single
 test function instead of repeating test code

---
 src/util/test/video.spec.ts | 68 ++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 42 deletions(-)

diff --git a/src/util/test/video.spec.ts b/src/util/test/video.spec.ts
index 6feb02d2..0063f219 100644
--- a/src/util/test/video.spec.ts
+++ b/src/util/test/video.spec.ts
@@ -2,48 +2,32 @@ import { VideoService } from '../video';
 
 describe('VideoService', () => {
   describe('getEmbedHtml', () => {
-    it('should return a YouTube embed iframe for a YouTube watch URL with alphanumeric ID', () => {
-      const url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
-      const expected = '<iframe loading="lazy" src="https://youtube.com/embed/dQw4w9WgXcQ"></iframe>';
-      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
-    });
-
-    it('should return a Vimeo player iframe for a Vimeo URL with numeric ID', () => {
-      const url = 'https://vimeo.com/123456789';
-      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
-      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
-    });
-
-    it('should return a generic YouTube iframe for other YouTube URLs', () => {
-      const url = 'https://youtube.com/some/other/path';
-      const expected = `<iframe loading="lazy" src="${url}"></iframe>`;
-      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
-    });
-
-    it('should return a generic Vimeo iframe with title for Vimeo Player URLs', () => {
-      const url = 'https://player.vimeo.com/video/123456789';
-      const title = 'My Video';
-      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="${title}"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
-      expect(VideoService.getEmbedHtml(url, title)).toBe(expected);
-    });
-
-    it('should return a generic Vimeo iframe without title for Vimeo Player URLs when title is null', () => {
-      const url = 'https://player.vimeo.com/video/123456789';
-      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
-      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
-    });
-
-    it('should return a generic Vimeo iframe without title for Vimeo Player URLs when title is empty', () => {
-      const url = 'https://player.vimeo.com/video/123456789';
-      const title = '';
-      const expected = `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="${url}?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`;
-      expect(VideoService.getEmbedHtml(url, title)).toBe(expected);
-    });
-
-    it('should return a video tag for other URLs', () => {
-      const url = 'https://example.com/video.mp4';
-      const expected = `<video controls src="${url}"></video>`;
-      expect(VideoService.getEmbedHtml(url, null)).toBe(expected);
+    it.each([
+      ['https://www.youtube.com/watch?v=dQw4w9WgXcQ', null, '<iframe loading="lazy" src="https://youtube.com/embed/dQw4w9WgXcQ"></iframe>'],
+      [
+        'https://vimeo.com/123456789',
+        null,
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      ['https://youtube.com/some/other/path', null, `<iframe loading="lazy" src="https://youtube.com/some/other/path"></iframe>`],
+      [
+        'https://player.vimeo.com/video/123456789',
+        'My Video',
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="My Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      [
+        'https://player.vimeo.com/video/123456789',
+        null,
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      [
+        'https://player.vimeo.com/video/123456789',
+        '',
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      ['https://example.com/video.mp4', null, `<video controls src="https://example.com/video.mp4"></video>`],
+    ] as const)('Returns appropriate HTML embed snippet for Video URL', (url: string, title: string | null, expectedSnippet: string) => {
+      expect(VideoService.getEmbedHtml(url, title)).toBe(expectedSnippet);
     });
   });
 });