From 68b313cb1408d6602db4387be6c1f83eb58502e2 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 23 Sep 2026 12:41:02 -0400
Subject: [PATCH 01/17] fix(deepmerge): patch prototype pollution
 CVE-2026-93753

deepmerge@4.3.1 (transitive via react-player, used in the Video
component) has no upstream fix for a prototype pollution vuln. Patch
mergeObject's unsafe-key check to reject __proto__/constructor/prototype
keys, and pin all in-tree deepmerge ranges to the patched build via
yarn resolutions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../deepmerge-npm-4.3.1-4f751a0844.patch      | 19 +++++++++++++++++++
 package.json                                  |  3 +++
 yarn.lock                                     |  9 ++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch

diff --git a/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch b/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch
new file mode 100644
index 0000000000..b5806ea8af
--- /dev/null
+++ b/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch
@@ -0,0 +1,19 @@
+diff --git a/dist/cjs.js b/dist/cjs.js
+index 7c36cbdd06cc22c92d590be3f87a08a91ca06b40..a5bcd4c2e916e9791174bebda8658852688f59db 100644
+--- a/dist/cjs.js
++++ b/dist/cjs.js
+@@ -69,8 +69,14 @@ function propertyIsOnObject(object, property) {
+ 	}
+ }
+ 
++// Keys that can be used to reach up the prototype chain and pollute Object.prototype (CVE-2026-93753).
++var UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
++
+ // Protects from prototype poisoning and unexpected merging up the prototype chain.
+ function propertyIsUnsafe(target, key) {
++	if (UNSAFE_KEYS.indexOf(key) !== -1) {
++		return true
++	}
+ 	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
+ 		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
+ 			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
diff --git a/package.json b/package.json
index ebed4bad7d..3358aa3063 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,9 @@
     "@types/react-test-renderer": "^18.2.0",
     "@typescript-eslint/utils": "^8.57.0",
     "axios": "1.14.0",
+    "deepmerge@npm:^4.0.0": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
+    "deepmerge@npm:^4.2.2": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
+    "deepmerge@npm:^4.3.1": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
     "error-ex": "1.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/yarn.lock b/yarn.lock
index 97acae82ee..34505a6fdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10990,13 +10990,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.0.0, deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
+"deepmerge@npm:4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
   languageName: node
   linkType: hard
 
+"deepmerge@patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch":
+  version: 4.3.1
+  resolution: "deepmerge@patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch::version=4.3.1&hash=488791"
+  checksum: 10c0/5863a8d426429f5c7a080d6fb5ba003c6bbe6945efe86fcc90f0f9dd4aa69eaf87d84daf853239c5bf88453cbdc8855152406e153bdec234f34d4d3f10c0ab0a
+  languageName: node
+  linkType: hard
+
 "default-browser-id@npm:^5.0.0":
   version: 5.0.0
   resolution: "default-browser-id@npm:5.0.0"

From 004a88225df01134d7c5e60ff5ce37e4c6cddae5 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 23 Sep 2026 13:34:48 -0400
Subject: [PATCH 02/17] Revert "fix(deepmerge): patch prototype pollution
 CVE-2026-93753"

This reverts commit 68b313cb1408d6602db4387be6c1f83eb58502e2.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../deepmerge-npm-4.3.1-4f751a0844.patch      | 19 -------------------
 package.json                                  |  3 ---
 yarn.lock                                     |  9 +--------
 3 files changed, 1 insertion(+), 30 deletions(-)
 delete mode 100644 .yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch

diff --git a/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch b/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch
deleted file mode 100644
index b5806ea8af..0000000000
--- a/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch
+++ /dev/null
@@ -1,19 +0,0 @@
-diff --git a/dist/cjs.js b/dist/cjs.js
-index 7c36cbdd06cc22c92d590be3f87a08a91ca06b40..a5bcd4c2e916e9791174bebda8658852688f59db 100644
---- a/dist/cjs.js
-+++ b/dist/cjs.js
-@@ -69,8 +69,14 @@ function propertyIsOnObject(object, property) {
- 	}
- }
- 
-+// Keys that can be used to reach up the prototype chain and pollute Object.prototype (CVE-2026-93753).
-+var UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
-+
- // Protects from prototype poisoning and unexpected merging up the prototype chain.
- function propertyIsUnsafe(target, key) {
-+	if (UNSAFE_KEYS.indexOf(key) !== -1) {
-+		return true
-+	}
- 	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
- 		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
- 			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
diff --git a/package.json b/package.json
index 3358aa3063..ebed4bad7d 100644
--- a/package.json
+++ b/package.json
@@ -117,9 +117,6 @@
     "@types/react-test-renderer": "^18.2.0",
     "@typescript-eslint/utils": "^8.57.0",
     "axios": "1.14.0",
-    "deepmerge@npm:^4.0.0": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
-    "deepmerge@npm:^4.2.2": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
-    "deepmerge@npm:^4.3.1": "patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch",
     "error-ex": "1.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/yarn.lock b/yarn.lock
index 34505a6fdc..97acae82ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10990,20 +10990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:4.3.1":
+"deepmerge@npm:^4.0.0, deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
   languageName: node
   linkType: hard
 
-"deepmerge@patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch":
-  version: 4.3.1
-  resolution: "deepmerge@patch:deepmerge@npm%3A4.3.1#~/.yarn/patches/deepmerge-npm-4.3.1-4f751a0844.patch::version=4.3.1&hash=488791"
-  checksum: 10c0/5863a8d426429f5c7a080d6fb5ba003c6bbe6945efe86fcc90f0f9dd4aa69eaf87d84daf853239c5bf88453cbdc8855152406e153bdec234f34d4d3f10c0ab0a
-  languageName: node
-  linkType: hard
-
 "default-browser-id@npm:^5.0.0":
   version: 5.0.0
   resolution: "default-browser-id@npm:5.0.0"

From 6aae7637e275130a831f912ed276c8a51a422b78 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 23 Sep 2026 14:19:47 -0400
Subject: [PATCH 03/17] fix(Video): upgrade react-player to v3 to remove
 vulnerable deepmerge dependency

react-player@2.x pulled in deepmerge@4.3.1, which has a prototype
pollution vuln (CVE-2026-93753, CVSS 8.7) with no upstream fix.
react-player@3 dropped deepmerge entirely in favor of native media
elements, so upgrading removes the vulnerable dependency from
@codecademy/gamut's tree rather than patching it.

- url prop renamed to src; youtube config no longer nests under
  playerVars; vimeo's config.title is now a boolean (native title
  overlay toggle), not a string, so the accessible video title is
  carried solely by the existing title prop
- dropped the dead ReactPlayerWithWrapper type (v3's ref now forwards
  to the underlying HTMLVideoElement, not a wrapper element)
- react-player is ESM-only in v3, so Jest needs it in
  transformIgnorePatterns; Video.test.tsx now mocks react-player
  directly (matching the existing pattern in Markdown.test.tsx)
  instead of rendering the real Vimeo/YouTube custom elements, which
  don't mount under jsdom

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 packages/gamut/jest.config.ts                 |   4 +-
 packages/gamut/package.json                   |   2 +-
 .../gamut/src/Video/__tests__/Video.test.tsx  |  10 +
 packages/gamut/src/Video/index.tsx            |   8 +-
 packages/gamut/src/Video/lib/ReactPlayer.tsx  |   6 -
 yarn.lock                                     | 461 +++++++++++++++++-
 6 files changed, 451 insertions(+), 40 deletions(-)

diff --git a/packages/gamut/jest.config.ts b/packages/gamut/jest.config.ts
index a418f1b531..668e9fffd5 100644
--- a/packages/gamut/jest.config.ts
+++ b/packages/gamut/jest.config.ts
@@ -9,5 +9,7 @@ export default base('gamut', {
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  transformIgnorePatterns: ['node_modules/(?!(@vidstack/react|@formatjs)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@vidstack/react|@formatjs|react-player)/)',
+  ],
 });
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index 63a4e70b18..0ea6a0846b 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -24,7 +24,7 @@
     "react-aria-components": "1.7.1",
     "react-focus-on": "3.10.0",
     "react-hook-form": "^7.71.2",
-    "react-player": "^2.16.0",
+    "react-player": "^3.4.0",
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",
     "react-use": "^17.6.1",
diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 3bb8c10feb..efa1846183 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -3,6 +3,16 @@ import * as React from 'react';
 
 import { Video } from '..';
 
+jest.mock('react-player', () => {
+  const react = require('react');
+  return {
+    __esModule: true,
+    // eslint-disable-next-line react/display-name
+    default: ({ src, title }: { src: string; title: string }) =>
+      react.createElement('iframe', { src, title }),
+  };
+});
+
 jest.mock('@vidstack/react', () => {
   const react = require('react');
   return {
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 718a9e83bd..76a3169b9a 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -5,7 +5,6 @@ import {
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
 import { useState } from 'react';
-import { BaseReactPlayerProps } from 'react-player/base';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
@@ -84,10 +83,7 @@ export const Video: React.FC<VideoProps> = (props) => {
 
   const config = {
     youtube: {
-      playerVars: { color: 'white' },
-    },
-    vimeo: {
-      title: videoTitle,
+      color: 'white' as const,
     },
   };
 
@@ -148,8 +144,8 @@ export const Video: React.FC<VideoProps> = (props) => {
             muted={muted}
             playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
             playing={autoplay}
+            src={videoUrl as string}
             title={videoTitle}
-            url={videoUrl as BaseReactPlayerProps['url']}
             width="100%"
             onPlay={onPlay}
             onReady={() => {
diff --git a/packages/gamut/src/Video/lib/ReactPlayer.tsx b/packages/gamut/src/Video/lib/ReactPlayer.tsx
index e065e460a0..3e6c9f2362 100644
--- a/packages/gamut/src/Video/lib/ReactPlayer.tsx
+++ b/packages/gamut/src/Video/lib/ReactPlayer.tsx
@@ -47,9 +47,3 @@ export const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
     </StyledFlexBox>
   );
 };
-
-/**
- * @remarks ReactPlayer has optional key 'wrapper' that we require for the onReady callback
- */
-
-export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement };
diff --git a/yarn.lock b/yarn.lock
index 97acae82ee..79d72bb0a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1684,7 +1684,7 @@ __metadata:
     react-aria-components: "npm:1.7.1"
     react-focus-on: "npm:3.10.0"
     react-hook-form: "npm:^7.71.2"
-    react-player: "npm:^2.16.0"
+    react-player: "npm:^3.4.0"
     react-select: "npm:^5.2.2"
     react-truncate-markup: "npm:^5.1.2"
     react-use: "npm:^17.6.1"
@@ -3391,6 +3391,71 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mux/mux-data-google-ima@npm:^0.3.4":
+  version: 0.3.17
+  resolution: "@mux/mux-data-google-ima@npm:0.3.17"
+  dependencies:
+    mux-embed: "npm:5.18.1"
+  checksum: 10c0/31deb2e51d1989dd3eb570114dcbc3a5e0b4e23b7e7081bb01f863e3f6629b3777d51910235a0f869879c3efd999a8d0eea870862167ab4ccbc95fc1c33be145
+  languageName: node
+  linkType: hard
+
+"@mux/mux-player-react@npm:^3.8.0":
+  version: 3.13.3
+  resolution: "@mux/mux-player-react@npm:3.13.3"
+  dependencies:
+    "@mux/mux-player": "npm:3.13.3"
+    "@mux/playback-core": "npm:0.35.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0
+    react: ^17.0.2 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0
+    react-dom: ^17.0.2 || ^17.0.2-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/4012d161196bc6e523668d68a1286c97eb0b5911caa18df58fa0c15710c3ba8919aed692ca41c5026c4e17bc3a16a14737d4813306fa85f64f0ac436a06dba53
+  languageName: node
+  linkType: hard
+
+"@mux/mux-player@npm:3.13.3":
+  version: 3.13.3
+  resolution: "@mux/mux-player@npm:3.13.3"
+  dependencies:
+    "@mux/mux-video": "npm:0.31.3"
+    "@mux/playback-core": "npm:0.35.3"
+    media-chrome: "npm:~4.19.0"
+    player.style: "npm:^0.3.0"
+  checksum: 10c0/29bd0924d46ca9bfaadba31499f4dde0c5ccedf068bd43bde208edfa04446b32ba9d1e123235725159b66d47ad45ef2614c2aa6f7cd73a8535dc552ef489c4b2
+  languageName: node
+  linkType: hard
+
+"@mux/mux-video@npm:0.31.3":
+  version: 0.31.3
+  resolution: "@mux/mux-video@npm:0.31.3"
+  dependencies:
+    "@mux/mux-data-google-ima": "npm:^0.3.4"
+    "@mux/playback-core": "npm:0.35.3"
+    "@types/google_interactive_media_ads_types": "npm:^3.697.0"
+    castable-video: "npm:~1.1.13"
+    custom-media-element: "npm:~1.4.6"
+    media-tracks: "npm:~0.3.5"
+  checksum: 10c0/eae4fb8f16505e64650400ed5920e353e54447537bf254c6359a57714d05ade68aa8aeb7f53da1e5cc01c922634b7b6474ef13d416114591c221b45b0cfe2cbb
+  languageName: node
+  linkType: hard
+
+"@mux/playback-core@npm:0.35.3":
+  version: 0.35.3
+  resolution: "@mux/playback-core@npm:0.35.3"
+  dependencies:
+    hls.js: "npm:~1.6.15"
+    mux-embed: "npm:^5.16.1"
+  checksum: 10c0/36e18c99c0f6370c7a0cbc9b227086c42cd298a033aa23ef508a7b730fa5d7802856ed22e174a6222f5a5cd76e37409bd6115f628bc7bfdd365ee617881d62f3
+  languageName: node
+  linkType: hard
+
 "@napi-rs/wasm-runtime@npm:0.2.4":
   version: 0.2.4
   resolution: "@napi-rs/wasm-runtime@npm:0.2.4"
@@ -7031,6 +7096,72 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@svta/cml-608@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@svta/cml-608@npm:1.0.2"
+  checksum: 10c0/ac1fc5cbf874a65319ebefe185f48200a9583da82f124fa4cf640ae140c101714e6a5a88a5e3e96766fdabb0845f7dff4220adb4a9a6289aff73864d79315c45
+  languageName: node
+  linkType: hard
+
+"@svta/cml-cmcd@npm:2.3.2":
+  version: 2.3.2
+  resolution: "@svta/cml-cmcd@npm:2.3.2"
+  peerDependencies:
+    "@svta/cml-structured-field-values": 1.1.3
+    "@svta/cml-utils": 1.5.0
+  checksum: 10c0/2e61b7bbdcbfc09181ece1e9054b9dd6902cdb8bc0645ca94f5b524498504f242dcc77b55fef2d748c2c614bc94c8a27eabecd61387a2e28f14d1987d247bce9
+  languageName: node
+  linkType: hard
+
+"@svta/cml-cmsd@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@svta/cml-cmsd@npm:1.0.6"
+  peerDependencies:
+    "@svta/cml-cta": 1.0.6
+    "@svta/cml-structured-field-values": 1.1.3
+    "@svta/cml-utils": 1.5.0
+  checksum: 10c0/a037592ef01b987ab240836e368dc59e8e7800faf64f5e7d5d4fe4d7ec42849f6866b4e525f1960b8890eb32afa808f4619e30aae3ca6b9e6b8fc23094791d05
+  languageName: node
+  linkType: hard
+
+"@svta/cml-dash@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@svta/cml-dash@npm:1.0.6"
+  peerDependencies:
+    "@svta/cml-utils": 1.5.0
+  checksum: 10c0/e9968f957a62661508a968cbdb49370d217d66db2657498ffa8ddaa033f441c41576b3ee20ab7f7e5bda8fee8972094756d1444f05d3ec4dd0f6ca8cebe61015
+  languageName: node
+  linkType: hard
+
+"@svta/cml-id3@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@svta/cml-id3@npm:1.0.6"
+  peerDependencies:
+    "@svta/cml-utils": 1.5.0
+  checksum: 10c0/866f19b8a04389acec666d25cbfa299651191f22a87d5ffa3e2e15207e82ae40d7b02977e8c6055aa28f3fb70a8018efae62a22b759322859966e596f3a170d8
+  languageName: node
+  linkType: hard
+
+"@svta/cml-request@npm:1.0.12":
+  version: 1.0.12
+  resolution: "@svta/cml-request@npm:1.0.12"
+  peerDependencies:
+    "@svta/cml-cmcd": 2.3.2
+    "@svta/cml-utils": 1.5.0
+    "@svta/cml-xml": 1.1.4
+  checksum: 10c0/5e0cabb725f8712e60c06a02856440208d1a2d9cb75c494d5f8930a05e6bf8c90373f4fb8760ac40f07231d574779ad3b18e71d8657a7c1fb80a642651c92f73
+  languageName: node
+  linkType: hard
+
+"@svta/cml-xml@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@svta/cml-xml@npm:1.1.4"
+  peerDependencies:
+    "@svta/cml-utils": 1.5.0
+  checksum: 10c0/09d881f9b9398b8b8c7f21c3e9869cac0a357a1a658c104d2c97ff64cdc1babd63d1e47d8961f9b6db14ec048e4cc0446a0e868970fafe8231fb51adb4e5de10
+  languageName: node
+  linkType: hard
+
 "@swc-node/core@npm:^1.14.1":
   version: 1.14.1
   resolution: "@swc-node/core@npm:1.14.1"
@@ -7625,6 +7756,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/google_interactive_media_ads_types@npm:^3.697.0":
+  version: 3.697.1
+  resolution: "@types/google_interactive_media_ads_types@npm:3.697.1"
+  checksum: 10c0/273e4119fdb6471e55abd4efeb6f333d6901cc4f4a6b1b2b14ad2ac17c3c3eeb10e1c781426914489e7dce3cc44028d4d5ce728df1cb2382b326698a04bc2e3a
+  languageName: node
+  linkType: hard
+
 "@types/hast@npm:^3.0.0":
   version: 3.0.4
   resolution: "@types/hast@npm:3.0.4"
@@ -8333,6 +8471,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vimeo/player@npm:2.29.0":
+  version: 2.29.0
+  resolution: "@vimeo/player@npm:2.29.0"
+  dependencies:
+    native-promise-only: "npm:0.8.1"
+    weakmap-polyfill: "npm:2.0.4"
+  checksum: 10c0/f8481ee9bffb8732bad1ac2ff3a18b4a8ddf9025f090825c76530eed57585165f67ada2532b9386e2a79fdd55ec90256d2ea2b70f72ad28ef452a7ff3778853c
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:3.2.4":
   version: 3.2.4
   resolution: "@vitest/expect@npm:3.2.4"
@@ -9413,6 +9561,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bcp-47-match@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "bcp-47-match@npm:2.0.3"
+  checksum: 10c0/ae5c202854df8a9ad4777dc3b49562578495a69164869f365a88c1a089837a9fbbce4c0c44f6f1a5e44c7841f47e91fe6fea00306ca49ce5ec95a7eb71f839c4
+  languageName: node
+  linkType: hard
+
 "big.js@npm:^5.2.2":
   version: 5.2.2
   resolution: "big.js@npm:5.2.2"
@@ -9740,6 +9895,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"castable-video@npm:~1.1.13":
+  version: 1.1.16
+  resolution: "castable-video@npm:1.1.16"
+  dependencies:
+    custom-media-element: "npm:~1.4.6"
+  checksum: 10c0/e9e8947697f3479f9911200968592d970a664880deff2bd34fd02e241203e97cb625ff37f29d01525fece1cbf2bebb8b3100b79843f67c93358796b7164ba30c
+  languageName: node
+  linkType: hard
+
 "ccount@npm:^2.0.0":
   version: 2.0.1
   resolution: "ccount@npm:2.0.1"
@@ -9747,6 +9911,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ce-la-react@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "ce-la-react@npm:0.3.2"
+  peerDependencies:
+    react: ">=17.0.0"
+  checksum: 10c0/cbee7602c1e4efc1278e5c0847b8201fa291ad3a5bde4137da139a7b6a2b7b8de029530fb2c474e62fcc544e62669003e4a34fd1abafac8110d89ffade588c37
+  languageName: node
+  linkType: hard
+
 "chai@npm:^5.2.0":
   version: 5.3.3
   resolution: "chai@npm:5.3.3"
@@ -10027,6 +10200,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cloudflare-video-element@npm:^1.3.4":
+  version: 1.3.5
+  resolution: "cloudflare-video-element@npm:1.3.5"
+  checksum: 10c0/83734439b257feedfa25cc0ad63e78e97d6a98d1833f54aa5573a4c315207ee99f3b59d306fb9849041a6a5d35459d57a9436e443e0cce696c6c0dfeb2eb4b56
+  languageName: node
+  linkType: hard
+
 "clsx@npm:^2.0.0":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
@@ -10052,6 +10232,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"codem-isoboxer@npm:0.3.10":
+  version: 0.3.10
+  resolution: "codem-isoboxer@npm:0.3.10"
+  checksum: 10c0/2df00af7ace2ba173d71ed95ed50774f486d2a54d3d979bb463f88cf8e551c83ff228ba625b7efdb9bfeddd22f3ad3ec717b5dc3e7176828eecf1b55dd8ee7e0
+  languageName: node
+  linkType: hard
+
 "collect-v8-coverage@npm:^1.0.2":
   version: 1.0.2
   resolution: "collect-v8-coverage@npm:1.0.2"
@@ -10813,6 +11000,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"custom-media-element@npm:^1.4.6, custom-media-element@npm:~1.4.6":
+  version: 1.4.6
+  resolution: "custom-media-element@npm:1.4.6"
+  checksum: 10c0/e47644f9f8f4f1ffdc0186d67d42b5472b9538f72d55a74283f820a5c411095849d029804263909b49b6bd79c7cc36399da827b45a733ed1f01b6ac5812cc045
+  languageName: node
+  linkType: hard
+
 "cwd@npm:^0.10.0":
   version: 0.10.0
   resolution: "cwd@npm:0.10.0"
@@ -10830,6 +11024,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dash-video-element@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "dash-video-element@npm:0.3.2"
+  dependencies:
+    custom-media-element: "npm:^1.4.6"
+    dashjs: "npm:^5.0.3"
+    media-tracks: "npm:^0.3.5"
+  checksum: 10c0/2656d5815084e9e5cf3b34a50e22fe31fa814b5468f5c10880dc7c9dd07091df8aa87f6f62791a4a1cfc40429bf8a95ecb2e983ea8f52d053cc2de7de7680770
+  languageName: node
+  linkType: hard
+
 "dashify@npm:^2.0.0":
   version: 2.0.0
   resolution: "dashify@npm:2.0.0"
@@ -10837,6 +11042,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dashjs@npm:^5.0.3":
+  version: 5.2.1
+  resolution: "dashjs@npm:5.2.1"
+  dependencies:
+    "@svta/cml-608": "npm:1.0.2"
+    "@svta/cml-cmcd": "npm:2.3.2"
+    "@svta/cml-cmsd": "npm:1.0.6"
+    "@svta/cml-dash": "npm:1.0.6"
+    "@svta/cml-id3": "npm:1.0.6"
+    "@svta/cml-request": "npm:1.0.12"
+    "@svta/cml-xml": "npm:1.1.4"
+    bcp-47-match: "npm:^2.0.3"
+    codem-isoboxer: "npm:0.3.10"
+    fast-deep-equal: "npm:3.1.3"
+    html-entities: "npm:^2.6.0"
+    imsc: "npm:^1.1.5"
+    localforage: "npm:^1.10.0"
+    path-browserify: "npm:^1.0.1"
+  checksum: 10c0/a402b0ab2c0cbfa26fbc3f0c033d4db579fd0209329d9c76887b60a57e5c2eb17d0b2823adba871228013a86d48474239fa1f169858c09c2426fe00ef826d4ef
+  languageName: node
+  linkType: hard
+
 "data-urls@npm:^5.0.0":
   version: 5.0.0
   resolution: "data-urls@npm:5.0.0"
@@ -10990,7 +11217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.0.0, deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
+"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
@@ -12504,7 +12731,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
+"fast-deep-equal@npm:3.1.3, fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
   checksum: 10c0/40dedc862eb8992c54579c66d914635afbec43350afbbe991235fdcb4e3a8d5af1b23ae7e79bef7d4882d0ecee06c3197488026998fb19f72dc95acff1d1b1d0
@@ -13679,6 +13906,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hls-video-element@npm:^1.5.9":
+  version: 1.5.11
+  resolution: "hls-video-element@npm:1.5.11"
+  dependencies:
+    custom-media-element: "npm:^1.4.6"
+    hls.js: "npm:^1.6.5"
+    media-tracks: "npm:^0.3.5"
+  checksum: 10c0/c9a0bae28e22dde450f4bf1dff3eca6c2ddfe1bac8543e51738f336241051bfad0b05fd8568b5e89c9ce0b62eacdaf6fbc58f29fcc567a216b4bdccce7ef0cf1
+  languageName: node
+  linkType: hard
+
+"hls.js@npm:^1.6.5":
+  version: 1.7.3
+  resolution: "hls.js@npm:1.7.3"
+  checksum: 10c0/c44c0098b9f4b53cb0c2cc2301d4cad907a77c60f470fa344b8cfc5077da4ccab9590d47e5cf81100a958d4aa43d7dc7bcb6566197fd9ae170ec10cea8af3e8c
+  languageName: node
+  linkType: hard
+
+"hls.js@npm:~1.6.15":
+  version: 1.6.19
+  resolution: "hls.js@npm:1.6.19"
+  checksum: 10c0/b249de61cf3d09f751e094f1a80f7e1993ac1ee3aa6ea6ec653a3bf9b62c3f20740a34b8ec404e91a2dcc3ecbeccff2998707522251dd316a33d7e699c196ea4
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -13754,10 +14006,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-entities@npm:^2.1.0":
-  version: 2.5.2
-  resolution: "html-entities@npm:2.5.2"
-  checksum: 10c0/f20ffb4326606245c439c231de40a7c560607f639bf40ffbfb36b4c70729fd95d7964209045f1a4e62fe17f2364cef3d6e49b02ea09016f207fde51c2211e481
+"html-entities@npm:^2.1.0, html-entities@npm:^2.6.0":
+  version: 2.6.0
+  resolution: "html-entities@npm:2.6.0"
+  checksum: 10c0/7c8b15d9ea0cd00dc9279f61bab002ba6ca8a7a0f3c36ed2db3530a67a9621c017830d1d2c1c65beb9b8e3436ea663e9cf8b230472e0e413359399413b27c8b7
   languageName: node
   linkType: hard
 
@@ -14092,6 +14344,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immediate@npm:~3.0.5":
+  version: 3.0.6
+  resolution: "immediate@npm:3.0.6"
+  checksum: 10c0/f8ba7ede69bee9260241ad078d2d535848745ff5f6995c7c7cb41cfdc9ccc213f66e10fa5afb881f90298b24a3f7344b637b592beb4f54e582770cdce3f1f039
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^5.0.2":
   version: 5.1.1
   resolution: "immutable@npm:5.1.1"
@@ -14128,6 +14387,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"imsc@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "imsc@npm:1.1.5"
+  dependencies:
+    sax: "npm:1.2.1"
+  checksum: 10c0/e51014332569f9de1d2fda6eda407bf5c366f1b67fd268d37e24c191680b6f47597ff38ec2b47bc93a5d645991cfa222c29510bf6cbc4fb443db6856bb1ccbde
+  languageName: node
+  linkType: hard
+
 "imurmurhash@npm:^0.1.4":
   version: 0.1.4
   resolution: "imurmurhash@npm:0.1.4"
@@ -15797,6 +16065,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lie@npm:3.1.1":
+  version: 3.1.1
+  resolution: "lie@npm:3.1.1"
+  dependencies:
+    immediate: "npm:~3.0.5"
+  checksum: 10c0/d62685786590351b8e407814acdd89efe1cb136f05cb9236c5a97b2efdca1f631d2997310ad2d565c753db7596799870140e4777c9c9b8c44a0f6bf42d1804a1
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^3.1.3":
   version: 3.1.3
   resolution: "lilconfig@npm:3.1.3"
@@ -15874,13 +16151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"load-script@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "load-script@npm:1.0.0"
-  checksum: 10c0/9919c777fe83f8a3a917f65c9c3ab186ad8b194248c57f413ef6e610194abc8484d123a6838d77ab33e5fa1a05a676b5dfe779c38cfe602bdd27c239423d0acd
-  languageName: node
-  linkType: hard
-
 "loader-runner@npm:^4.3.1":
   version: 4.3.1
   resolution: "loader-runner@npm:4.3.1"
@@ -15906,6 +16176,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"localforage@npm:^1.10.0":
+  version: 1.10.0
+  resolution: "localforage@npm:1.10.0"
+  dependencies:
+    lie: "npm:3.1.1"
+  checksum: 10c0/00f19f1f97002e6721587ed5017f502d58faf80dae567d5065d4d1ee0caf0762f40d2e2dba7f0ef7d3f14ee6203242daae9ecad97359bfc10ecff36df11d85a3
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -16396,6 +16675,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"media-chrome@npm:~4.19.0":
+  version: 4.19.2
+  resolution: "media-chrome@npm:4.19.2"
+  dependencies:
+    ce-la-react: "npm:^0.3.2"
+  checksum: 10c0/e0c6b43835afe269658520d22f45cc1a29b3c1b5d98cc90f070e2aba284877d3297c74abe4069942d53f239aa3b66202d189641826363ce1dc6c9dc0d5674b4f
+  languageName: node
+  linkType: hard
+
+"media-played-ranges-mixin@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "media-played-ranges-mixin@npm:0.1.0"
+  checksum: 10c0/fb380096708dae897e2b1651b6f33c243bf932c733c2bd94e278eba3412dedceebcd6829be2fc677c79726c5eae9db8b09ad2f78eb1cbf1e7ad151801140bf3b
+  languageName: node
+  linkType: hard
+
+"media-tracks@npm:^0.3.5, media-tracks@npm:~0.3.5":
+  version: 0.3.5
+  resolution: "media-tracks@npm:0.3.5"
+  checksum: 10c0/a34402cb63dbf1c7d839595d0daf53b8df2a357f5fc71a365fe8427fd9013c09a3a957a6ad29a2bec177667f507ed7955eed71f7d12ced56e1f9edc8e178e93b
+  languageName: node
+  linkType: hard
+
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -17147,6 +17449,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mux-embed@npm:5.18.1, mux-embed@npm:^5.16.1":
+  version: 5.18.1
+  resolution: "mux-embed@npm:5.18.1"
+  checksum: 10c0/cbe80a0ab82e50191a0f610fce0ff4b063a49da119e284233dfa441d60eb6860dbfcebf468009e45f3a13927e883e9a122423b565b998c199c9524d73992f191
+  languageName: node
+  linkType: hard
+
 "nano-css@npm:^5.6.2":
   version: 5.6.2
   resolution: "nano-css@npm:5.6.2"
@@ -17184,6 +17493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"native-promise-only@npm:0.8.1":
+  version: 0.8.1
+  resolution: "native-promise-only@npm:0.8.1"
+  checksum: 10c0/c1b41128ca9806818e12d0b84f7c71e88b1fa00f0f4857767d96206dbdd0af6755305103f55c583b045533185ffca863b0c34116ade507ff7ba2e417e076a5ac
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -18221,6 +18537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-browserify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "path-browserify@npm:1.0.1"
+  checksum: 10c0/8b8c3fd5c66bd340272180590ae4ff139769e9ab79522e2eb82e3d571a89b8117c04147f65ad066dccfb42fcad902e5b7d794b3d35e0fd840491a8ddbedf8c66
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -18389,6 +18712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"player.style@npm:^0.3.0":
+  version: 0.3.4
+  resolution: "player.style@npm:0.3.4"
+  dependencies:
+    media-chrome: "npm:~4.19.0"
+  checksum: 10c0/9e598ca62ea6f0c61c2ebb3f9b03f14943eb83e9f87e9d7f1211767b5845d8515065c798801af3ecb0b9a0afc6660b6563f7877ee90082f8bdef0c57caab3ca6
+  languageName: node
+  linkType: hard
+
 "playwright-core@npm:1.58.2, playwright-core@npm:>=1.2.0":
   version: 1.58.2
   resolution: "playwright-core@npm:1.58.2"
@@ -18977,7 +19309,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -19268,7 +19600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.2":
+"react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
   checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
@@ -19372,18 +19704,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-player@npm:^2.16.0":
-  version: 2.16.0
-  resolution: "react-player@npm:2.16.0"
+"react-player@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "react-player@npm:3.4.0"
   dependencies:
-    deepmerge: "npm:^4.0.0"
-    load-script: "npm:^1.0.0"
-    memoize-one: "npm:^5.1.1"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.0.1"
+    "@mux/mux-player-react": "npm:^3.8.0"
+    cloudflare-video-element: "npm:^1.3.4"
+    dash-video-element: "npm:^0.3.0"
+    hls-video-element: "npm:^1.5.9"
+    spotify-audio-element: "npm:^1.0.3"
+    tiktok-video-element: "npm:^0.1.1"
+    twitch-video-element: "npm:^0.1.5"
+    vimeo-video-element: "npm:^1.6.1"
+    wistia-video-element: "npm:^1.3.5"
+    youtube-video-element: "npm:^1.8.0"
   peerDependencies:
-    react: ">=16.6.0"
-  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
+    "@types/react": ^17.0.0 || ^18 || ^19
+    react: ^17.0.2 || ^18 || ^19
+    react-dom: ^17.0.2 || ^18 || ^19
+  checksum: 10c0/189e763720a53899b8b4bce34221465a63ca02d861a9f1e6651069708669b3556a9b72e98a848660b4ce4dab1466d0da9edc16c82b8db573701dd0e5b2da4f0a
   languageName: node
   linkType: hard
 
@@ -20533,6 +20872,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sax@npm:1.2.1":
+  version: 1.2.1
+  resolution: "sax@npm:1.2.1"
+  checksum: 10c0/1ae269cfde0b3774b4c92eb744452b6740bde5c5744fe5cadef6f496e42d9b632f483fb6aff9a23c0749c94c6951b06b0c5a90a5e99c879d3401cfd5ba61dc02
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4, sax@npm:^1.5.0":
   version: 1.6.0
   resolution: "sax@npm:1.6.0"
@@ -21169,6 +21515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"spotify-audio-element@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "spotify-audio-element@npm:1.0.4"
+  checksum: 10c0/a9ab6348d2769915774c08341c85a90033dfe58196dd67137e76048fccd89c97b9a82a5871f6352e736442a14a4d44c0a01bcaa1223cfa16f33bb8df5c682501
+  languageName: node
+  linkType: hard
+
 "sprintf-js@npm:~1.0.2":
   version: 1.0.3
   resolution: "sprintf-js@npm:1.0.3"
@@ -21650,6 +22003,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"super-media-element@npm:~1.4.2":
+  version: 1.4.2
+  resolution: "super-media-element@npm:1.4.2"
+  checksum: 10c0/cdb49318e163fe52305cc6a46629e210297faf6653a3135e8d0118e6a54bd170c065337f835cdf750f3f4ad8cf68e66dc2b5ceda0895c3fdfe1b31975d30a1f8
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -21961,6 +22321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiktok-video-element@npm:^0.1.1":
+  version: 0.1.2
+  resolution: "tiktok-video-element@npm:0.1.2"
+  checksum: 10c0/a8e52a6a035b565293b3959d6d931cf9235f8afdaca0faf3233374d7e473d512b66ee7a79e81fb230ba03835d2bbe2476c54c03832c25aa438c6a947803293ef
+  languageName: node
+  linkType: hard
+
 "tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
@@ -22293,6 +22660,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"twitch-video-element@npm:^0.1.5":
+  version: 0.1.6
+  resolution: "twitch-video-element@npm:0.1.6"
+  checksum: 10c0/7c7fcaafa754b8472d0f22bb5e5d9c54888e8e9b25312b3afdbf971cefb7b4a63f340316d91cc4c90873468d9e873bd08a330bded9df37c4755837e1b9dd5231
+  languageName: node
+  linkType: hard
+
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"
@@ -22987,6 +23361,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vimeo-video-element@npm:^1.6.1":
+  version: 1.7.3
+  resolution: "vimeo-video-element@npm:1.7.3"
+  dependencies:
+    "@vimeo/player": "npm:2.29.0"
+    media-played-ranges-mixin: "npm:^0.1.0"
+  checksum: 10c0/1e48ded1b25e83c6c76ebe161e362b40b51df81a81d869dc3204b86ddd0a6fb3d8f5a3f08edc13fa1712626eaa408597405869f490a74f2d34fce89e39bdaf8a
+  languageName: node
+  linkType: hard
+
 "w3c-xmlserializer@npm:^5.0.0":
   version: 5.0.0
   resolution: "w3c-xmlserializer@npm:5.0.0"
@@ -23083,6 +23467,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"weakmap-polyfill@npm:2.0.4":
+  version: 2.0.4
+  resolution: "weakmap-polyfill@npm:2.0.4"
+  checksum: 10c0/c1d46244ad456b05cfba7a0eb2f0236d7c85c8fa2500575aaa2fb0e77d85cccb72136f51a021de07e1d85a70d99aa272a149ac707093f485d924b7ebd5742eed
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -23439,6 +23830,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wistia-video-element@npm:^1.3.5":
+  version: 1.4.0
+  resolution: "wistia-video-element@npm:1.4.0"
+  dependencies:
+    super-media-element: "npm:~1.4.2"
+  checksum: 10c0/42951c36ed645411eb597b49888e4989a6c858e11f9fc912a7a4170d0f9db066a2ca45a87a7d31fd9ab680fab2f89cf6fda8ea33703c421da2f7e9aff4398f31
+  languageName: node
+  linkType: hard
+
 "word-wrap@npm:^1.2.5":
   version: 1.2.5
   resolution: "word-wrap@npm:1.2.5"
@@ -23716,6 +24116,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"youtube-video-element@npm:^1.8.0":
+  version: 1.9.0
+  resolution: "youtube-video-element@npm:1.9.0"
+  dependencies:
+    media-played-ranges-mixin: "npm:^0.1.0"
+  checksum: 10c0/c1db4d2ddf0fe4d41ff15d7d395d0cf0d06d0b19b5f8e093d4c5bbc5cc965e3882ef64bba5d68a16762801c7788ba25e21799986e647c59cd76c9c81183ae018
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^2.0.0":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"

From 3c31d4d807fadabee4513552a55ac78be4baa40c Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 23 Sep 2026 14:33:40 -0400
Subject: [PATCH 04/17] test(Video): swap vimeo fixture url in test and story

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 packages/gamut/src/Video/__tests__/Video.test.tsx             | 2 +-
 packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index efa1846183..34f03c9115 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -40,7 +40,7 @@ const renderView = setupRtl(Video, {});
 describe('Video', () => {
   it('loads a video with a vimeo URL', async () => {
     const { view } = renderView({
-      videoUrl: 'https://vimeo.com/145702525',
+      videoUrl: 'https://vimeo.com/1218916076',
       videoTitle: 'Super Science Friends',
     });
 
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
index 331d24d442..1fa7dd88e3 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
@@ -29,7 +29,7 @@ export const Youtube: Story = {
 
 export const Vimeo: Story = {
   args: {
-    videoUrl: 'https://vimeo.com/773539409',
+    videoUrl: 'https://vimeo.com/1218916076',
     videoTitle: 'CODECADEMY | Develop Yourself',
   },
 };

From 5daf1e4aadb9e6395b196ca3beb397448b6faf95 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 24 Sep 2026 09:10:51 -0400
Subject: [PATCH 05/17] fix(Video): split Video out of the main barrel to
 protect non-Video consumers

react-player@3's dependency tree (tiktok-video-element, vimeo-video-element,
etc.) relies on package.json "exports" subpaths that legacy bundlers like
webpack 4 can't resolve. Because @codecademy/gamut's main entry re-exports
every component from one flat barrel, ANY consumer resolving
'@codecademy/gamut' was forced to resolve react-player's exports-map-only
subpaths at build time, even if they never rendered <Video> - this is what
broke Codecademy's build despite it not importing Video anywhere.

- Remove `export * from './Video'` from the main barrel; add a legacy
  subpath package (packages/gamut/Video/package.json, no "exports" field
  needed) so `@codecademy/gamut/Video` still resolves via plain Node
  resolution. Consumers using Video need this one import path change.
- Markdown's Iframe/MarkdownVideo overrides also statically imported Video
  via a relative path, so any Markdown consumer was equally exposed
  regardless of the Video split. Made these opt-in via new
  `iframeOverride`/`videoOverride` props instead of always-on defaults;
  without opting in, <iframe>/<video> tags in markdown now render as plain
  tags rather than the polished Video component. Iframe/MarkdownVideo are
  re-exported from the Video subpath so opting in doesn't touch the main
  barrel either.
- Updated gamut's own internal Video usages (styleguide stories,
  code-connect) to the new subpath import.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../code-connect/Molecules/Video.figma.tsx    |  2 +-
 packages/gamut/Video/package.json             |  5 +++
 .../__snapshots__/gamut.test.ts.snap          |  1 -
 packages/gamut/package.json                   |  3 +-
 .../src/Markdown/__tests__/Markdown.test.tsx  | 42 ++++++++++++++-----
 packages/gamut/src/Markdown/index.tsx         | 29 +++++++------
 packages/gamut/src/Video/index.tsx            | 11 +++++
 packages/gamut/src/index.tsx                  |  8 +++-
 .../RadialProgress/RadialProgress.stories.tsx |  3 +-
 .../src/lib/Molecules/Video/Video.stories.tsx |  2 +-
 10 files changed, 77 insertions(+), 29 deletions(-)
 create mode 100644 packages/gamut/Video/package.json

diff --git a/packages/code-connect/Molecules/Video.figma.tsx b/packages/code-connect/Molecules/Video.figma.tsx
index 70cbc52079..8ed08e90ea 100644
--- a/packages/code-connect/Molecules/Video.figma.tsx
+++ b/packages/code-connect/Molecules/Video.figma.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Video } from '@codecademy/gamut';
+import { Video } from '@codecademy/gamut/Video';
 import figma from '@figma/code-connect';
 
 /**
diff --git a/packages/gamut/Video/package.json b/packages/gamut/Video/package.json
new file mode 100644
index 0000000000..4a30c50a67
--- /dev/null
+++ b/packages/gamut/Video/package.json
@@ -0,0 +1,5 @@
+{
+  "main": "../dist/Video/index.js",
+  "module": "../dist/Video/index.js",
+  "types": "../dist/Video/index.d.ts"
+}
diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
index 14d8d3f58a..30593dae53 100644
--- a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
+++ b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
@@ -132,6 +132,5 @@ exports[`Gamut Exported Keys 1`] = `
   "useIsMounted",
   "useLocalQuery",
   "useSubmitState",
-  "Video",
 ]
 `;
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index 0ea6a0846b..61ce64ccdd 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -33,7 +33,8 @@
   "files": [
     "dist",
     "bin",
-    "agent-tools"
+    "agent-tools",
+    "Video"
   ],
   "license": "MIT",
   "main": "./dist/index.js",
diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index a2f7f91f9c..766d00d9c6 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -5,6 +5,7 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
+import { Iframe, MarkdownVideo } from '../../Video';
 import { Markdown } from '../index';
 
 const mockTitle = 'a fake youtube';
@@ -119,30 +120,49 @@ describe('<Markdown />', () => {
     ).toEqual(0);
   });
 
-  it('Renders YouTube iframes using the Video component', () => {
-    renderView({ text: youtubeMarkdown });
+  it('Renders YouTube iframes using the Video component when opted in', () => {
+    renderView({
+      iframeOverride: { component: Iframe },
+      text: youtubeMarkdown,
+    });
     screen.getByTitle(mockTitle);
   });
 
-  it('Renders Vimeo iframes using the Video component', () => {
-    renderView({ text: vimeoMarkdown });
+  it('Renders Vimeo iframes using the Video component when opted in', () => {
+    renderView({
+      iframeOverride: { component: Iframe },
+      text: vimeoMarkdown,
+    });
     screen.getByTitle(mockTitle);
   });
 
-  it('Renders video tags using the Video component if they have an src', () => {
-    renderView({ text: videoMarkdown });
-    screen.getByTitle(mockTitle);
+  it('Renders bare iframes when not opted in', () => {
+    renderView({ text: youtubeMarkdown });
+    expect(document.querySelectorAll('iframe').length).toEqual(1);
+    expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
   });
 
-  it('Renders video tags using the Video component if they have a source', () => {
-    renderView({ text: videoSourceMarkdown });
+  it('Renders video tags using the Video component if they have an src when opted in', () => {
+    renderView({
+      text: videoMarkdown,
+      videoOverride: { component: MarkdownVideo },
+    });
     screen.getByTitle(mockTitle);
   });
-  it('Renders YouTube iframes using the Video component', () => {
-    renderView({ text: youtubeMarkdown });
+
+  it('Renders video tags using the Video component if they have a source when opted in', () => {
+    renderView({
+      text: videoSourceMarkdown,
+      videoOverride: { component: MarkdownVideo },
+    });
     screen.getByTitle(mockTitle);
   });
 
+  it('Renders bare video tags when not opted in', () => {
+    renderView({ text: videoMarkdown });
+    expect(document.querySelectorAll('video').length).toEqual(1);
+    expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
+  });
   it('Wraps the markdown in a div by default (block)', () => {
     renderView({ text: basicMarkdown });
     expect(
diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx
index bd17f489d4..049f4f3462 100644
--- a/packages/gamut/src/Markdown/index.tsx
+++ b/packages/gamut/src/Markdown/index.tsx
@@ -12,18 +12,17 @@ import {
   createInputOverride,
   createTagOverride,
   createVideoOverride,
+  MarkdownOverrideSetting,
   MarkdownOverrideSettings,
   standardOverrides,
 } from './libs/overrides';
 import { MarkdownCheckbox } from './libs/overrides/Checkbox';
 import { Details } from './libs/overrides/Details';
-import { Iframe } from './libs/overrides/Iframe';
 import {
   MarkdownAnchor,
   MarkdownAnchorProps,
 } from './libs/overrides/MarkdownAnchor';
 import { Table } from './libs/overrides/Table';
-import { MarkdownVideo } from './libs/overrides/Video';
 import { createPreprocessingInstructions } from './libs/preprocessing';
 import { defaultSanitizationConfig } from './libs/sanitizationConfig';
 import { markdownStyles } from './styles';
@@ -47,9 +46,7 @@ export type SkipDefaultOverridesSettings = {
   a?: boolean;
   checkbox?: boolean;
   details?: boolean;
-  iframe?: boolean;
   table?: boolean;
-  video?: boolean;
 };
 
 export type MarkdownProps = {
@@ -68,6 +65,18 @@ export type MarkdownProps = {
    * Callback when a markdown anchor tag is clicked
    */
   onAnchorClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * Renders <iframe> tags with the given component (e.g. Iframe from
+   * '@codecademy/gamut/Video') instead of a bare iframe. Opt-in so Markdown
+   * doesn't statically depend on react-player unless you need it.
+   */
+  iframeOverride?: MarkdownOverrideSetting;
+  /**
+   * Renders <video> tags with the given component (e.g. MarkdownVideo from
+   * '@codecademy/gamut/Video') instead of a bare video tag. Opt-in so
+   * Markdown doesn't statically depend on react-player unless you need it.
+   */
+  videoOverride?: MarkdownOverrideSetting;
 };
 
 export class Markdown extends PureComponent<MarkdownProps> {
@@ -81,6 +90,8 @@ export class Markdown extends PureComponent<MarkdownProps> {
       inline = false,
       headerIds = true,
       onAnchorClick,
+      iframeOverride,
+      videoOverride,
     } = this.props;
 
     if (!text) return null;
@@ -94,10 +105,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
 
     const processingInstructions = [
       ...overrides,
-      !skipDefaultOverrides.iframe &&
-        createTagOverride('iframe', {
-          component: Iframe,
-        }),
+      iframeOverride && createTagOverride('iframe', iframeOverride),
       !skipDefaultOverrides.a &&
         createTagOverride('a', {
           component: MarkdownAnchor,
@@ -122,10 +130,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
           component: Table,
           allowedAttributes: ['style'],
         }),
-      !skipDefaultOverrides.video &&
-        createVideoOverride('video', {
-          component: MarkdownVideo,
-        }),
+      videoOverride && createVideoOverride('video', videoOverride),
       !skipDefaultOverrides.details &&
         createTagOverride('details', {
           component: Details,
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 76a3169b9a..9b9e45c557 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -166,3 +166,14 @@ export const Video: React.FC<VideoProps> = (props) => {
     </>
   );
 };
+
+/*
+  Re-exported here (rather than from the main '@codecademy/gamut' barrel)
+  so Markdown's video/iframe overrides stay opt-in: importing them only
+  pulls in react-player if a consumer explicitly wants Video-in-markdown
+  rendering. See Markdown's videoOverride/iframeOverride props.
+*/
+export { Iframe } from '../Markdown/libs/overrides/Iframe';
+export type { IframeProps } from '../Markdown/libs/overrides/Iframe';
+export { MarkdownVideo } from '../Markdown/libs/overrides/Video';
+export type { MarkdownVideoProps } from '../Markdown/libs/overrides/Video';
diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx
index 523f237b2a..d667d2bf87 100644
--- a/packages/gamut/src/index.tsx
+++ b/packages/gamut/src/index.tsx
@@ -53,4 +53,10 @@ export * from './typings/responsive-properties';
 export * from './Typography/Text';
 export type { HeadingTags } from './Typography/types';
 export * from './utils';
-export * from './Video';
+/*
+  Video is intentionally not re-exported here: it pulls in react-player,
+  whose dependency tree relies on package.json "exports" subpaths that
+  legacy bundlers (e.g. webpack 4) can't resolve. Keeping it off the main
+  barrel means consumers who don't use Video never need to resolve that
+  tree. Import it from '@codecademy/gamut/Video' instead.
+*/
diff --git a/packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx b/packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx
index 72b80ae90b..a4d8463055 100644
--- a/packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx
@@ -1,4 +1,5 @@
-import { Box, RadialProgress, Video } from '@codecademy/gamut';
+import { Box, RadialProgress } from '@codecademy/gamut';
+import { Video } from '@codecademy/gamut/Video';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof RadialProgress> = {
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
index 1fa7dd88e3..f02a010a29 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
@@ -1,4 +1,4 @@
-import { Video } from '@codecademy/gamut';
+import { Video } from '@codecademy/gamut/Video';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Video> = {

From 37f4d7eb6d678ebae2807084d7f1995840e4e454 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 24 Sep 2026 09:14:24 -0400
Subject: [PATCH 06/17] docs(Video, Markdown): document the Video subpath
 import and opt-in overrides

Video.mdx now points at '@codecademy/gamut/Video' instead of the main
barrel, and explains why. Markdown.mdx gets a new Video overrides section
covering iframeOverride/videoOverride, corrects the outdated
skipDefaultOverrides claim about iframe, and adds stories/example.md
copy showing both the opted-in and bare-tag fallback states.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/lib/Molecules/Video/Video.mdx         |  6 +++++
 .../src/lib/Organisms/Markdown/Markdown.mdx   | 27 +++++++++++++++++--
 .../Organisms/Markdown/Markdown.stories.tsx   | 17 ++++++++++++
 .../src/lib/Organisms/Markdown/example.md     |  4 +--
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
index 0e9e2a76ad..86f4676bc9 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
@@ -27,6 +27,12 @@ export const parameters = {
 
 The Video component is a feature-rich video player that supports multiple video sources and formats with enhanced accessibility features.
 
+```tsx
+import { Video } from '@codecademy/gamut/Video';
+```
+
+`Video` is imported from `@codecademy/gamut/Video`, not the main `@codecademy/gamut` barrel. It depends on `react-player`, whose own dependency tree relies on package.json `"exports"` subpaths that legacy bundlers (e.g. webpack 4) can't resolve — keeping it off the main barrel means consumers who don't use `Video` never need to resolve that tree. To render video content embedded in `Markdown` text, see the [Video overrides](../Organisms/Markdown/Markdown.mdx#video-overrides) section on the Markdown docs page instead of importing `Video` directly.
+
 ### Key Features
 
 - **Multiple Sources**: Supports YouTube, Vimeo, HLS, and DASH video streams
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
index 91d00101f2..e2e5edcfba 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
+++ b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
@@ -39,12 +39,35 @@ A common override may be to change the font size of a Header.
 
 <Canvas of={MarkdownStories.HeaderOverride} />
 
-### `skipDefaultOverides`
+### `skipDefaultOverrides`
 
-If you need to override a link, iframe, or table, you do not need to provide the `skipDefaultOverides` prop. This prop is now only used for removing the default heading, paragraph, and list element overrides.
+If you need to override a link or table, you do not need to provide the `skipDefaultOverrides` prop — just pass `overrides`. `skipDefaultOverrides` is only used for removing the default anchor, table, details, and checkbox overrides.
 
 <Canvas of={MarkdownStories.LinkOverride} />
 
+## Video overrides
+
+By default, `<iframe>` and `<video>` tags embedded in markdown text render as plain HTML tags, not Gamut's `Video` component. This is intentional: `Video` depends on `react-player`, whose own dependency tree relies on package.json `"exports"` subpaths that legacy bundlers (e.g. webpack 4) can't resolve. Statically importing it by default would force every `Markdown` consumer to resolve that tree, even ones that never render video content — so it's opt-in instead.
+
+To render YouTube/Vimeo iframes and `<video>` tags with the full `Video` component (play-icon overlay, light-mode thumbnail, captions, etc.), import `Iframe` and `MarkdownVideo` from `@codecademy/gamut/Video` (not the main `@codecademy/gamut` barrel) and pass them via the `iframeOverride`/`videoOverride` props:
+
+```tsx
+import { Markdown } from '@codecademy/gamut';
+import { Iframe, MarkdownVideo } from '@codecademy/gamut/Video';
+
+<Markdown
+  text={content}
+  iframeOverride={{ component: Iframe }}
+  videoOverride={{ component: MarkdownVideo }}
+/>;
+```
+
+<Canvas of={MarkdownStories.VideoOverride} />
+
+### Without the override
+
+<Canvas of={MarkdownStories.WithoutVideoOverride} />
+
 ## Inline Markdown
 
 You can also provide use the Markdown component inline.
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
index 5018b0f404..859ddda4a0 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
+++ b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
@@ -1,4 +1,5 @@
 import { Markdown, Text, TextProps } from '@codecademy/gamut';
+import { Iframe, MarkdownVideo } from '@codecademy/gamut/Video';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import exampleMarkdown from './example.md';
@@ -23,8 +24,10 @@ This is markdown
 
 export const FullExample: Story = {
   args: {
+    iframeOverride: { component: Iframe },
     // Not sure why there's a type mismatch, but the story renders
     text: exampleMarkdown as any,
+    videoOverride: { component: MarkdownVideo },
   },
 };
 
@@ -76,6 +79,20 @@ export const LinkOverride: Story = {
   },
 };
 
+export const VideoOverride: Story = {
+  args: {
+    iframeOverride: { component: Iframe },
+    text: `<iframe src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop"></iframe>`,
+    videoOverride: { component: MarkdownVideo },
+  },
+};
+
+export const WithoutVideoOverride: Story = {
+  args: {
+    text: `<iframe src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop"></iframe>`,
+  },
+};
+
 export const InlineMarkdown: Story = {
   args: { text: `this is an inline markdown component`, inline: true },
   render: (args) => {
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/example.md b/packages/styleguide/src/lib/Organisms/Markdown/example.md
index 3b2edf22a0..0a13f0b67f 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/example.md
+++ b/packages/styleguide/src/lib/Organisms/Markdown/example.md
@@ -347,7 +347,7 @@ Use the `printf()` function.
 
 ### Iframes
 
-Vimeo and Youtube video iframes will be rendered by our Video component (if showPlayerEmbed is true it will be rendered in actual embed), otherwise they'll render the original code.
+Vimeo and Youtube video iframes will be rendered by our Video component (if showPlayerEmbed is true it will be rendered in actual embed) when you pass the `iframeOverride` prop; otherwise they'll render as a plain `iframe`. See the [Video overrides](#video-overrides) section on the Markdown docs page for details.
 
 <iframe src="https://player.vimeo.com/video/188237476?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Studio Ghibli in Real Life"></iframe>
 
@@ -357,7 +357,7 @@ Vimeo and Youtube video iframes will be rendered by our Video component (if show
 
 ### Video
 
-`video`s with an `src` or a `source` video file will be rendered by our Video component, otherwise they'll render the original code. Videos with a `style` prop or another restricted prop will be stripped of that property.
+`video`s with an `src` or a `source` video file will be rendered by our Video component when you pass the `videoOverride` prop; otherwise they'll render as a plain `video` tag. Videos with a `style` prop or another restricted prop will be stripped of that property.
 Insert `track` to add subtitles / captions to the video.
 
 <video width="100%" height="100%" align="middle" controls>

From b5b49c7a6a46344357a7f8f4c266bec63459ccb1 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 5 Oct 2026 12:14:04 -0400
Subject: [PATCH 07/17] version plan

---
 .nx/version-plans/version-plan-1791216778502.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .nx/version-plans/version-plan-1791216778502.md

diff --git a/.nx/version-plans/version-plan-1791216778502.md b/.nx/version-plans/version-plan-1791216778502.md
new file mode 100644
index 0000000000..e28a5b52a4
--- /dev/null
+++ b/.nx/version-plans/version-plan-1791216778502.md
@@ -0,0 +1,5 @@
+---
+gamut: major
+---
+
+Move Video out of barrel and update

From fd06fdfc078e50c0f220daa20ea0258685972f5a Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 5 Oct 2026 14:39:15 -0400
Subject: [PATCH 08/17] fix(Video): make @vidstack/react and react-player
 optional peer deps

Now that Video lives behind the @codecademy/gamut/Video subpath, the main
barrel no longer imports either player library, so consumers who don't use
Video shouldn't have to install them.

- Move @vidstack/react and react-player from dependencies to optional
  peerDependencies; keep them as devDependencies for the repo's own
  build, tests, and styleguide.
- Document the install step in the Video docs and the version plan, and
  add a pointer comment at the top of src/Video/index.tsx for anyone
  following a "Can't resolve" bundler error.
---
 .nx/version-plans/version-plan-1791216778502.md  |  3 +++
 packages/gamut/package.json                      | 16 +++++++++++++---
 packages/gamut/src/Video/index.tsx               |  2 ++
 .../styleguide/src/lib/Molecules/Video/Video.mdx | 10 ++++++++++
 yarn.lock                                        |  6 ++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/.nx/version-plans/version-plan-1791216778502.md b/.nx/version-plans/version-plan-1791216778502.md
index e28a5b52a4..636cbb2e44 100644
--- a/.nx/version-plans/version-plan-1791216778502.md
+++ b/.nx/version-plans/version-plan-1791216778502.md
@@ -3,3 +3,6 @@ gamut: major
 ---
 
 Move Video out of barrel and update
+
+- `Video` is now imported from `@codecademy/gamut/Video` instead of `@codecademy/gamut`.
+- `@vidstack/react` and `react-player` are now optional peer dependencies. If you use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides), install them: `yarn add @vidstack/react react-player`.
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index b8a0e8dcab..f2db652809 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -13,7 +13,6 @@
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
-    "@vidstack/react": "^1.12.12",
     "classnames": "^2.2.5",
     "framer-motion": "^12.0.0",
     "html-to-react": "^1.6.0",
@@ -24,12 +23,15 @@
     "react-aria-components": "1.7.1",
     "react-focus-on": "3.10.0",
     "react-hook-form": "^7.71.2",
-    "react-player": "^3.4.0",
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",
     "react-use": "^17.6.1",
     "sanitize-markdown": "^2.6.7"
   },
+  "devDependencies": {
+    "@vidstack/react": "^1.12.12",
+    "react-player": "^3.4.0"
+  },
   "files": [
     "dist",
     "bin",
@@ -45,13 +47,21 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
+    "@vidstack/react": "^1.12.12",
     "css-loader": ">=4.0.0",
     "react": "^17.0.2 || ^18.3.0 || ^19.0.0",
-    "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0"
+    "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0",
+    "react-player": "^3.4.0"
   },
   "peerDependenciesMeta": {
+    "@vidstack/react": {
+      "optional": true
+    },
     "css-loader": {
       "optional": true
+    },
+    "react-player": {
+      "optional": true
     }
   },
   "publishConfig": {
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 9b9e45c557..d610b8b2e7 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,3 +1,5 @@
+// @vidstack/react and react-player are optional peer deps of @codecademy/gamut.
+// If they can't be resolved, install them: yarn add @vidstack/react react-player
 import { PlayerSrc, TrackProps } from '@vidstack/react';
 import {
   DefaultLayoutTranslations,
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
index 86f4676bc9..a05743fd30 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
@@ -27,6 +27,16 @@ export const parameters = {
 
 The Video component is a feature-rich video player that supports multiple video sources and formats with enhanced accessibility features.
 
+### Installation
+
+`Video`'s player libraries are optional peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
+
+```bash
+yarn add @vidstack/react react-player
+```
+
+Without them, your bundler will fail with `Can't resolve '@vidstack/react'` (or `'react-player'`) when you import from `@codecademy/gamut/Video`.
+
 ```tsx
 import { Video } from '@codecademy/gamut/Video';
 ```
diff --git a/yarn.lock b/yarn.lock
index 69aa49ad9c..48b173b196 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1692,12 +1692,18 @@ __metadata:
   peerDependencies:
     "@emotion/react": ^11.4.0
     "@emotion/styled": ^11.3.0
+    "@vidstack/react": ^1.12.12
     css-loader: ">=4.0.0"
     react: ^17.0.2 || ^18.3.0 || ^19.0.0
     react-dom: ^17.0.2 || ^18.3.0 || ^19.0.0
+    react-player: ^3.4.0
   peerDependenciesMeta:
+    "@vidstack/react":
+      optional: true
     css-loader:
       optional: true
+    react-player:
+      optional: true
   bin:
     gamut: ./bin/gamut.mjs
   languageName: unknown

From 4999da4b3d9ee456b3899f14949d8e8dfe2a59fa Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Tue, 6 Oct 2026 15:29:53 -0400
Subject: [PATCH 09/17] peer deps back

---
 .../version-plan-1791216778502.md             |  2 +-
 package.json                                  |  2 +-
 packages/gamut/package.json                   | 10 ++-------
 packages/gamut/src/Video/index.tsx            |  2 +-
 .../styleguide/src/lib/Meta/Installation.mdx  | 10 +++++++++
 .../src/lib/Molecules/Video/Video.mdx         |  6 +++--
 yarn.lock                                     | 22 ++++++++-----------
 7 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/.nx/version-plans/version-plan-1791216778502.md b/.nx/version-plans/version-plan-1791216778502.md
index 636cbb2e44..645bed50cf 100644
--- a/.nx/version-plans/version-plan-1791216778502.md
+++ b/.nx/version-plans/version-plan-1791216778502.md
@@ -5,4 +5,4 @@ gamut: major
 Move Video out of barrel and update
 
 - `Video` is now imported from `@codecademy/gamut/Video` instead of `@codecademy/gamut`.
-- `@vidstack/react` and `react-player` are now optional peer dependencies. If you use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides), install them: `yarn add @vidstack/react react-player`.
+- `@vidstack/react` and `react-player` are now peer dependencies. If you use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides), install them: `yarn add @vidstack/react@~1.12.12 react-player@^3.4.0`. Gamut supports `@vidstack/react` 1.12.x only; note that its npm `latest` tag still points to 0.6.x.
diff --git a/package.json b/package.json
index ebed4bad7d..5602fb5a02 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "@vidstack/react": "^1.12.12",
+    "@vidstack/react": "~1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.23",
     "react": "^19.0.0",
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index f2db652809..86da68cec0 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -29,7 +29,7 @@
     "sanitize-markdown": "^2.6.7"
   },
   "devDependencies": {
-    "@vidstack/react": "^1.12.12",
+    "@vidstack/react": "~1.12.12",
     "react-player": "^3.4.0"
   },
   "files": [
@@ -47,21 +47,15 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@vidstack/react": "^1.12.12",
+    "@vidstack/react": "~1.12.12",
     "css-loader": ">=4.0.0",
     "react": "^17.0.2 || ^18.3.0 || ^19.0.0",
     "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0",
     "react-player": "^3.4.0"
   },
   "peerDependenciesMeta": {
-    "@vidstack/react": {
-      "optional": true
-    },
     "css-loader": {
       "optional": true
-    },
-    "react-player": {
-      "optional": true
     }
   },
   "publishConfig": {
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index d610b8b2e7..65cc1e4cd7 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,4 +1,4 @@
-// @vidstack/react and react-player are optional peer deps of @codecademy/gamut.
+// @vidstack/react and react-player are peer deps of @codecademy/gamut.
 // If they can't be resolved, install them: yarn add @vidstack/react react-player
 import { PlayerSrc, TrackProps } from '@vidstack/react';
 import {
diff --git a/packages/styleguide/src/lib/Meta/Installation.mdx b/packages/styleguide/src/lib/Meta/Installation.mdx
index 72facfbced..9828430562 100644
--- a/packages/styleguide/src/lib/Meta/Installation.mdx
+++ b/packages/styleguide/src/lib/Meta/Installation.mdx
@@ -131,3 +131,13 @@ Add more package scopes inside the non-capturing group if your tree pulls in oth
 Even when those packages are transformed, older Babel configs may not handle every language feature.
 
 To fix that, the necessary plugins need to be added to the Babel config Jest uses, or upgrade **`@babel/preset-env`** / Babel so that feature is covered.
+
+For example, `@vidstack/react` 1.14+ (outside Gamut's supported `~1.12.12` range) uses static class blocks. If your Babel config includes `@babel/plugin-transform-private-methods` (or another class-features plugin), tests fail with `Static class blocks are not enabled` unless you also add `@babel/plugin-transform-class-static-block`, listed before it:
+
+```js
+// babel.config.js (or equivalent)
+plugins: [
+  '@babel/plugin-transform-class-static-block',
+  '@babel/plugin-transform-private-methods',
+],
+```
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
index a05743fd30..91df60601f 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
@@ -29,12 +29,14 @@ The Video component is a feature-rich video player that supports multiple video
 
 ### Installation
 
-`Video`'s player libraries are optional peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
+`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
 
 ```bash
-yarn add @vidstack/react react-player
+yarn add @vidstack/react@~1.12.12 react-player@^3.4.0
 ```
 
+Pin the versions: `@vidstack/react`'s npm `latest` tag still points to 0.6.x (1.x is published under `next`), so a bare `yarn add @vidstack/react` installs 0.6, which lacks the `@vidstack/react/player/layouts/default` subpath `Video` imports and fails with `Module not found`. Versions 1.14+ use static class blocks, which break Jest in repos whose Babel config can't parse them (see "Babel and newer syntax" on the Installation page).
+
 Without them, your bundler will fail with `Can't resolve '@vidstack/react'` (or `'react-player'`) when you import from `@codecademy/gamut/Video`.
 
 ```tsx
diff --git a/yarn.lock b/yarn.lock
index 48b173b196..41ca23cc69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1673,7 +1673,7 @@ __metadata:
     "@formatjs/intl-locale": "npm:5.3.1"
     "@react-aria/interactions": "npm:3.25.0"
     "@types/marked": "npm:^4.0.8"
-    "@vidstack/react": "npm:^1.12.12"
+    "@vidstack/react": "npm:~1.12.12"
     classnames: "npm:^2.2.5"
     framer-motion: "npm:^12.0.0"
     html-to-react: "npm:^1.6.0"
@@ -1692,18 +1692,14 @@ __metadata:
   peerDependencies:
     "@emotion/react": ^11.4.0
     "@emotion/styled": ^11.3.0
-    "@vidstack/react": ^1.12.12
+    "@vidstack/react": ~1.12.12
     css-loader: ">=4.0.0"
     react: ^17.0.2 || ^18.3.0 || ^19.0.0
     react-dom: ^17.0.2 || ^18.3.0 || ^19.0.0
     react-player: ^3.4.0
   peerDependenciesMeta:
-    "@vidstack/react":
-      optional: true
     css-loader:
       optional: true
-    react-player:
-      optional: true
   bin:
     gamut: ./bin/gamut.mjs
   languageName: unknown
@@ -8464,16 +8460,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vidstack/react@npm:^1.12.12":
-  version: 1.12.12
-  resolution: "@vidstack/react@npm:1.12.12"
+"@vidstack/react@npm:~1.12.12":
+  version: 1.12.13
+  resolution: "@vidstack/react@npm:1.12.13"
   dependencies:
     "@floating-ui/dom": "npm:^1.6.10"
     media-captions: "npm:^1.0.4"
   peerDependencies:
-    "@types/react": ^18.0.0
-    react: ^18.0.0
-  checksum: 10c0/a4deed92f6805b0ba5867e61960e29cf0de0ae2b23b4db197f8d1fbd2fea254a93958cf00227d60272a5f36d6421e55f82e78aa7585c4a633ad8a6767f9b0246
+    "@types/react": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+  checksum: 10c0/b86f9ad1026b041eae54ba9f0840a826805252083bc6add75490ac243d316b19e937cf2e72db5a527193e1fb65adf73a1cd9ef58523559207947b7123dc4d11a
   languageName: node
   linkType: hard
 
@@ -13418,7 +13414,7 @@ __metadata:
     "@types/stylis": "npm:^4.2.0"
     "@typescript-eslint/eslint-plugin": "npm:^8.57.0"
     "@typescript-eslint/parser": "npm:^8.57.0"
-    "@vidstack/react": "npm:^1.12.12"
+    "@vidstack/react": "npm:~1.12.12"
     babel-jest: "npm:30.4.1"
     babel-plugin-macros: "npm:^3.0.1"
     commander: "npm:^14.0.3"

From 1f4bcbc6a1a220fb4e6ba2714ddc934ff6d43172 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 7 Oct 2026 10:56:16 -0400
Subject: [PATCH 10/17] add back title

---
 .../gamut/src/Video/__tests__/Video.test.tsx     | 15 +++++++++++++--
 packages/gamut/src/Video/index.tsx               | 16 +++++++++++++++-
 .../styleguide/src/lib/Molecules/Video/Video.mdx |  2 +-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 34f03c9115..294ffce6d6 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -8,8 +8,11 @@ jest.mock('react-player', () => {
   return {
     __esModule: true,
     // eslint-disable-next-line react/display-name
-    default: ({ src, title }: { src: string; title: string }) =>
-      react.createElement('iframe', { src, title }),
+    // Mimics react-player v3: the inner provider iframe has no title.
+    default: ({ src, onReady }: { src: string; onReady?: () => void }) => {
+      react.useEffect(() => onReady?.(), []);
+      return react.createElement('iframe', { src });
+    },
   };
 });
 
@@ -55,4 +58,12 @@ describe('Video', () => {
 
     await view.findByTitle('Workout with Rick Sanchez');
   });
+
+  it('gives the provider iframe a default accessible name when no title is passed', async () => {
+    const { view } = renderView({
+      videoUrl: 'https://www.youtube.com/watch?v=Yl8yy5tpVIM',
+    });
+
+    await view.findByTitle('Video player');
+  });
 });
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 65cc1e4cd7..5cc5089ae3 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -6,7 +6,7 @@ import {
   ThumbnailSrc,
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
@@ -66,6 +66,8 @@ export type VideoProps = {
   showDefaultProviderControls?: boolean;
 };
 
+const DEFAULT_VIDEO_TITLE = 'Video player';
+
 export const Video: React.FC<VideoProps> = (props) => {
   const {
     autoplay = false,
@@ -82,6 +84,7 @@ export const Video: React.FC<VideoProps> = (props) => {
   } = props;
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
+  const playerWrapperRef = useRef<HTMLDivElement>(null);
 
   const config = {
     youtube: {
@@ -89,6 +92,15 @@ export const Video: React.FC<VideoProps> = (props) => {
     },
   };
 
+  // react-player v3 puts `title` on its custom element, not the inner provider
+  // iframe, so the iframe would otherwise have no accessible name (WCAG 4.1.2).
+  const labelProviderIframe = () => {
+    const iframe = playerWrapperRef.current?.querySelector('iframe');
+    if (iframe && !iframe.title) {
+      iframe.title = videoTitle || DEFAULT_VIDEO_TITLE;
+    }
+  };
+
   const isExternallyHostedVideoUrl = (url: string): boolean =>
     !!(url.match(/youtu(be\.com|\.be)/) || url.match(/vimeo\.com/));
 
@@ -134,6 +146,7 @@ export const Video: React.FC<VideoProps> = (props) => {
         overflow="hidden"
         position="relative"
         pt={'56.25%' as any}
+        ref={playerWrapperRef}
         width="100%"
       >
         {isMounted ? (
@@ -151,6 +164,7 @@ export const Video: React.FC<VideoProps> = (props) => {
             width="100%"
             onPlay={onPlay}
             onReady={() => {
+              labelProviderIframe();
               onReady?.();
               setLoading(false);
             }}
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
index 91df60601f..976644a02d 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
@@ -29,7 +29,7 @@ The Video component is a feature-rich video player that supports multiple video
 
 ### Installation
 
-`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
+`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. They're only needed if you import from `@codecademy/gamut/Video`; the main `@codecademy/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
 
 ```bash
 yarn add @vidstack/react@~1.12.12 react-player@^3.4.0

From 55c00d08efcd8fb1ba9965209834db7827e96222 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 7 Oct 2026 12:39:19 -0400
Subject: [PATCH 11/17] more tweaks to title

---
 packages/gamut/src/Video/__tests__/Video.test.tsx | 11 ++++++++---
 packages/gamut/src/Video/index.tsx                | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 294ffce6d6..78bf531e5b 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -9,9 +9,14 @@ jest.mock('react-player', () => {
     __esModule: true,
     // eslint-disable-next-line react/display-name
     // Mimics react-player v3: the inner provider iframe has no title.
-    default: ({ src, onReady }: { src: string; onReady?: () => void }) => {
-      react.useEffect(() => onReady?.(), []);
-      return react.createElement('iframe', { src });
+    default: ({ src }: { src: string }) => {
+      // Insert the iframe after mount, without ever firing onReady, to prove
+      // the title doesn't depend on that callback.
+      const [show, setShow] = react.useState(false);
+      react.useEffect(() => {
+        setShow(true);
+      }, []);
+      return show ? react.createElement('iframe', { src }) : null;
     },
   };
 });
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 5cc5089ae3..6f15d3df89 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -6,7 +6,7 @@ import {
   ThumbnailSrc,
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
@@ -101,6 +101,18 @@ export const Video: React.FC<VideoProps> = (props) => {
     }
   };
 
+  // The provider inserts its iframe asynchronously, often before `onReady`
+  // fires, so label it as soon as it appears rather than waiting.
+  useEffect(() => {
+    const wrapper = playerWrapperRef.current;
+    if (!wrapper) return;
+    labelProviderIframe();
+    const observer = new MutationObserver(labelProviderIframe);
+    observer.observe(wrapper, { childList: true, subtree: true });
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoTitle, videoUrl, isMounted]);
+
   const isExternallyHostedVideoUrl = (url: string): boolean =>
     !!(url.match(/youtu(be\.com|\.be)/) || url.match(/vimeo\.com/));
 

From c9c440d1a6fe288bdeef808a2e9f8a4161660f83 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 9 Oct 2026 09:29:20 -0400
Subject: [PATCH 12/17] remove workaround for now

---
 .../gamut/src/Video/__tests__/Video.test.tsx  | 29 ++++++-------------
 packages/gamut/src/Video/index.tsx            | 29 +------------------
 2 files changed, 10 insertions(+), 48 deletions(-)

diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 78bf531e5b..fc121651cf 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -1,4 +1,5 @@
 import { setupRtl } from '@codecademy/gamut-tests';
+import { waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { Video } from '..';
@@ -8,16 +9,8 @@ jest.mock('react-player', () => {
   return {
     __esModule: true,
     // eslint-disable-next-line react/display-name
-    // Mimics react-player v3: the inner provider iframe has no title.
-    default: ({ src }: { src: string }) => {
-      // Insert the iframe after mount, without ever firing onReady, to prove
-      // the title doesn't depend on that callback.
-      const [show, setShow] = react.useState(false);
-      react.useEffect(() => {
-        setShow(true);
-      }, []);
-      return show ? react.createElement('iframe', { src }) : null;
-    },
+    default: ({ src }: { src: string }) =>
+      react.createElement('iframe', { src }),
   };
 });
 
@@ -52,7 +45,9 @@ describe('Video', () => {
       videoTitle: 'Super Science Friends',
     });
 
-    await view.findByTitle('Super Science Friends');
+    await waitFor(() =>
+      expect(view.container.querySelector('iframe')).toBeInTheDocument()
+    );
   });
 
   it('loads a video with a youtube ID', async () => {
@@ -61,14 +56,8 @@ describe('Video', () => {
       videoTitle: 'Workout with Rick Sanchez',
     });
 
-    await view.findByTitle('Workout with Rick Sanchez');
-  });
-
-  it('gives the provider iframe a default accessible name when no title is passed', async () => {
-    const { view } = renderView({
-      videoUrl: 'https://www.youtube.com/watch?v=Yl8yy5tpVIM',
-    });
-
-    await view.findByTitle('Video player');
+    await waitFor(() =>
+      expect(view.container.querySelector('iframe')).toBeInTheDocument()
+    );
   });
 });
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 6f15d3df89..fb43572650 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -6,7 +6,7 @@ import {
   ThumbnailSrc,
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
@@ -66,8 +66,6 @@ export type VideoProps = {
   showDefaultProviderControls?: boolean;
 };
 
-const DEFAULT_VIDEO_TITLE = 'Video player';
-
 export const Video: React.FC<VideoProps> = (props) => {
   const {
     autoplay = false,
@@ -84,7 +82,6 @@ export const Video: React.FC<VideoProps> = (props) => {
   } = props;
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
-  const playerWrapperRef = useRef<HTMLDivElement>(null);
 
   const config = {
     youtube: {
@@ -92,27 +89,6 @@ export const Video: React.FC<VideoProps> = (props) => {
     },
   };
 
-  // react-player v3 puts `title` on its custom element, not the inner provider
-  // iframe, so the iframe would otherwise have no accessible name (WCAG 4.1.2).
-  const labelProviderIframe = () => {
-    const iframe = playerWrapperRef.current?.querySelector('iframe');
-    if (iframe && !iframe.title) {
-      iframe.title = videoTitle || DEFAULT_VIDEO_TITLE;
-    }
-  };
-
-  // The provider inserts its iframe asynchronously, often before `onReady`
-  // fires, so label it as soon as it appears rather than waiting.
-  useEffect(() => {
-    const wrapper = playerWrapperRef.current;
-    if (!wrapper) return;
-    labelProviderIframe();
-    const observer = new MutationObserver(labelProviderIframe);
-    observer.observe(wrapper, { childList: true, subtree: true });
-    return () => observer.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTitle, videoUrl, isMounted]);
-
   const isExternallyHostedVideoUrl = (url: string): boolean =>
     !!(url.match(/youtu(be\.com|\.be)/) || url.match(/vimeo\.com/));
 
@@ -158,7 +134,6 @@ export const Video: React.FC<VideoProps> = (props) => {
         overflow="hidden"
         position="relative"
         pt={'56.25%' as any}
-        ref={playerWrapperRef}
         width="100%"
       >
         {isMounted ? (
@@ -172,11 +147,9 @@ export const Video: React.FC<VideoProps> = (props) => {
             playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
             playing={autoplay}
             src={videoUrl as string}
-            title={videoTitle}
             width="100%"
             onPlay={onPlay}
             onReady={() => {
-              labelProviderIframe();
               onReady?.();
               setLoading(false);
             }}

From e45a0da8fd0c824c1ec443e69181e92bba13da29 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 9 Oct 2026 11:00:59 -0400
Subject: [PATCH 13/17] shadow-root-aware

---
 .../gamut/src/Video/__tests__/Video.test.tsx  | 64 ++++++++++++++++---
 packages/gamut/src/Video/index.tsx            | 47 +++++++++++++-
 2 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index fc121651cf..98f8528b25 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -4,13 +4,38 @@ import * as React from 'react';
 
 import { Video } from '..';
 
+let mockRenderInShadowRoot = false;
+
 jest.mock('react-player', () => {
   const react = require('react');
   return {
     __esModule: true,
     // eslint-disable-next-line react/display-name
-    default: ({ src }: { src: string }) =>
-      react.createElement('iframe', { src }),
+    // Mimics react-player v3: the inner provider iframe has no title.
+    default: ({ src }: { src: string }) => {
+      const hostRef = react.useRef(null);
+      // Insert the iframe after mount, without ever firing onReady, to prove
+      // the title doesn't depend on that callback.
+      const [show, setShow] = react.useState(false);
+      react.useEffect(() => {
+        if (!mockRenderInShadowRoot) {
+          setShow(true);
+          return;
+        }
+        // Like <youtube-video>: the iframe lives in an open shadow root that
+        // is filled in asynchronously.
+        const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
+        setTimeout(() => {
+          const iframe = shadowRoot.ownerDocument.createElement('iframe');
+          iframe.src = src;
+          shadowRoot.appendChild(iframe);
+        });
+      }, []);
+      if (mockRenderInShadowRoot) {
+        return react.createElement('div', { ref: hostRef });
+      }
+      return show ? react.createElement('iframe', { src }) : null;
+    },
   };
 });
 
@@ -39,15 +64,17 @@ jest.mock('@vidstack/react', () => {
 const renderView = setupRtl(Video, {});
 
 describe('Video', () => {
+  afterEach(() => {
+    mockRenderInShadowRoot = false;
+  });
+
   it('loads a video with a vimeo URL', async () => {
     const { view } = renderView({
       videoUrl: 'https://vimeo.com/1218916076',
       videoTitle: 'Super Science Friends',
     });
 
-    await waitFor(() =>
-      expect(view.container.querySelector('iframe')).toBeInTheDocument()
-    );
+    await view.findByTitle('Super Science Friends');
   });
 
   it('loads a video with a youtube ID', async () => {
@@ -56,8 +83,29 @@ describe('Video', () => {
       videoTitle: 'Workout with Rick Sanchez',
     });
 
-    await waitFor(() =>
-      expect(view.container.querySelector('iframe')).toBeInTheDocument()
-    );
+    await view.findByTitle('Workout with Rick Sanchez');
+  });
+
+  it('gives the provider iframe a default accessible name when no title is passed', async () => {
+    const { view } = renderView({
+      videoUrl: 'https://www.youtube.com/watch?v=Yl8yy5tpVIM',
+    });
+
+    await view.findByTitle('Video player');
+  });
+
+  it('labels a provider iframe rendered inside a shadow root', async () => {
+    mockRenderInShadowRoot = true;
+    const { view } = renderView({
+      videoUrl: 'https://www.youtube.com/watch?v=Yl8yy5tpVIM',
+      videoTitle: 'Workout with Rick Sanchez',
+    });
+
+    await waitFor(() => {
+      const iframe = Array.from(view.container.querySelectorAll('*'))
+        .map((el) => el.shadowRoot?.querySelector('iframe'))
+        .find(Boolean);
+      expect(iframe?.title).toBe('Workout with Rick Sanchez');
+    });
   });
 });
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index fb43572650..d6fa4d84bc 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -6,7 +6,7 @@ import {
   ThumbnailSrc,
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
@@ -66,6 +66,8 @@ export type VideoProps = {
   showDefaultProviderControls?: boolean;
 };
 
+const DEFAULT_VIDEO_TITLE = 'Video player';
+
 export const Video: React.FC<VideoProps> = (props) => {
   const {
     autoplay = false,
@@ -82,6 +84,7 @@ export const Video: React.FC<VideoProps> = (props) => {
   } = props;
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
+  const playerWrapperRef = useRef<HTMLDivElement>(null);
 
   const config = {
     youtube: {
@@ -89,6 +92,45 @@ export const Video: React.FC<VideoProps> = (props) => {
     },
   };
 
+  // react-player v3 puts `title` on its custom element, not the inner provider
+  // iframe, so the iframe would otherwise have no accessible name (WCAG 4.1.2).
+  // Provider elements like <youtube-video> render that iframe inside an open
+  // shadow root, so search shadow roots too. `onShadowRoot` lets the observer
+  // below watch each shadow root it finds.
+  const labelProviderIframe = (onShadowRoot?: (root: ShadowRoot) => void) => {
+    const label = (root: ParentNode) => {
+      root.querySelectorAll('iframe').forEach((iframe) => {
+        if (!iframe.title) iframe.title = videoTitle || DEFAULT_VIDEO_TITLE;
+      });
+      root.querySelectorAll('*').forEach((el) => {
+        if (el.shadowRoot) {
+          onShadowRoot?.(el.shadowRoot);
+          label(el.shadowRoot);
+        }
+      });
+    };
+    if (playerWrapperRef.current) label(playerWrapperRef.current);
+  };
+
+  // The provider inserts its iframe asynchronously, often before `onReady`
+  // fires, and may replace it later (e.g. on src change), so label it
+  // whenever it appears rather than waiting.
+  useEffect(() => {
+    const wrapper = playerWrapperRef.current;
+    if (!wrapper) return;
+    const observed = new WeakSet<Node>();
+    const observe = (root: Node) => {
+      if (observed.has(root)) return;
+      observed.add(root);
+      observer.observe(root, { childList: true, subtree: true });
+    };
+    const observer = new MutationObserver(() => labelProviderIframe(observe));
+    observe(wrapper);
+    labelProviderIframe(observe);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoTitle, videoUrl, isMounted]);
+
   const isExternallyHostedVideoUrl = (url: string): boolean =>
     !!(url.match(/youtu(be\.com|\.be)/) || url.match(/vimeo\.com/));
 
@@ -134,6 +176,7 @@ export const Video: React.FC<VideoProps> = (props) => {
         overflow="hidden"
         position="relative"
         pt={'56.25%' as any}
+        ref={playerWrapperRef}
         width="100%"
       >
         {isMounted ? (
@@ -147,9 +190,11 @@ export const Video: React.FC<VideoProps> = (props) => {
             playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
             playing={autoplay}
             src={videoUrl as string}
+            title={videoTitle}
             width="100%"
             onPlay={onPlay}
             onReady={() => {
+              labelProviderIframe();
               onReady?.();
               setLoading(false);
             }}

From 70ba9ace185a433d1efed1490dcd826c8bdbea72 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 9 Oct 2026 14:26:22 -0400
Subject: [PATCH 14/17] swap markdown videos

---
 .../src/Markdown/__tests__/Markdown.test.tsx  | 36 +++++++++++++++++--
 packages/gamut/src/Markdown/index.tsx         |  3 +-
 .../src/Markdown/libs/overrides/index.tsx     | 13 ++++---
 .../gamut/src/Video/__tests__/Video.test.tsx  |  4 +--
 .../src/lib/Molecules/Video/Video.mdx         | 17 +++++++--
 .../src/lib/Organisms/Markdown/Markdown.mdx   |  6 ----
 .../Organisms/Markdown/Markdown.stories.tsx   |  4 +--
 7 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index 766d00d9c6..e94f18b525 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -12,12 +12,16 @@ const mockTitle = 'a fake youtube';
 
 jest.mock('react-player', () => ({
   __esModule: true,
-  default: () => <iframe title={mockTitle} />,
+  default: ({ title }: { title?: string }) => (
+    <iframe title={title ?? mockTitle} />
+  ),
 }));
 
 jest.mock('@vidstack/react', () => ({
   __esModule: true,
-  MediaPlayer: () => <iframe title={mockTitle} />,
+  MediaPlayer: ({ title }: { title?: string }) => (
+    <iframe title={title ?? mockTitle} />
+  ),
   MediaProvider: () => <div />,
   Poster: jest.fn(),
   Track: jest.fn(),
@@ -59,7 +63,7 @@ const vimeoMarkdown = `
 `;
 
 const videoMarkdown = `
-<video src="/example.webm" title="video" />
+<video src="/example.webm" />
 `;
 
 const videoSourceMarkdown = `
@@ -142,6 +146,32 @@ describe('<Markdown />', () => {
     expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
   });
 
+  it('Keeps the title attribute on bare iframes and video tags', () => {
+    renderView({
+      text: `<iframe src="https://player.vimeo.com/video/1218916076" title="Doug Workshop Intro"></iframe>\n\n<video src="/example.webm" title="Example clip"></video>`,
+    });
+    screen.getByTitle('Doug Workshop Intro');
+    screen.getByTitle('Example clip');
+  });
+
+  it('Passes the iframe title through to the Video component when opted in', () => {
+    renderView({
+      iframeOverride: { component: Iframe },
+      text: `<iframe src="https://player.vimeo.com/video/1218916076" title="Doug Workshop Intro"></iframe>`,
+    });
+    screen.getByTitle('Doug Workshop Intro');
+    expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
+  });
+
+  it('Passes the video title through to the Video component when opted in', () => {
+    renderView({
+      text: `<video src="/example.webm" title="Example clip"></video>`,
+      videoOverride: { component: MarkdownVideo },
+    });
+    screen.getByTitle('Example clip');
+    expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
+  });
+
   it('Renders video tags using the Video component if they have an src when opted in', () => {
     renderView({
       text: videoMarkdown,
diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx
index 049f4f3462..a06a4e09a1 100644
--- a/packages/gamut/src/Markdown/index.tsx
+++ b/packages/gamut/src/Markdown/index.tsx
@@ -130,7 +130,8 @@ export class Markdown extends PureComponent<MarkdownProps> {
           component: Table,
           allowedAttributes: ['style'],
         }),
-      videoOverride && createVideoOverride('video', videoOverride),
+      videoOverride &&
+        createVideoOverride({ tagName: 'video', Override: videoOverride }),
       !skipDefaultOverrides.details &&
         createTagOverride('details', {
           component: Details,
diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
index a4f85a5970..81c0bbe77b 100644
--- a/packages/gamut/src/Markdown/libs/overrides/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -138,11 +138,16 @@ export const createTagOverride = (
   },
 });
 
+type CreateVideoOverrideArgs = {
+  tagName: string;
+  Override: MarkdownOverrideSetting;
+};
+
 // generic video tag override
-export const createVideoOverride = (
-  tagName: string,
-  Override: MarkdownOverrideSetting
-) => ({
+export const createVideoOverride = ({
+  tagName,
+  Override,
+}: CreateVideoOverrideArgs) => ({
   shouldProcessNode(node: HTMLToReactNode) {
     if (!Override) return false;
 
diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 98f8528b25..8080a83ec5 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -71,10 +71,10 @@ describe('Video', () => {
   it('loads a video with a vimeo URL', async () => {
     const { view } = renderView({
       videoUrl: 'https://vimeo.com/1218916076',
-      videoTitle: 'Super Science Friends',
+      videoTitle: 'Doug Workshop Intro',
     });
 
-    await view.findByTitle('Super Science Friends');
+    await view.findByTitle('Doug Workshop Intro');
   });
 
   it('loads a video with a youtube ID', async () => {
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
index 976644a02d..2e3719f66a 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx
@@ -29,7 +29,7 @@ The Video component is a feature-rich video player that supports multiple video
 
 ### Installation
 
-`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. They're only needed if you import from `@codecademy/gamut/Video`; the main `@codecademy/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add them alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
+`Video`'s player libraries are peer dependencies of `@codecademy/gamut`, so they aren't installed automatically. They're only needed if the `Video` component is used, which is imported from `@codecademy/gamut/Video`. The main `@codecademy/gamut` barrel never loads them, so apps that don't use `Video` can skip them. Add the following packages alongside Gamut to use `Video` (or the Markdown `Iframe`/`MarkdownVideo` overrides):
 
 ```bash
 yarn add @vidstack/react@~1.12.12 react-player@^3.4.0
@@ -37,13 +37,26 @@ yarn add @vidstack/react@~1.12.12 react-player@^3.4.0
 
 Pin the versions: `@vidstack/react`'s npm `latest` tag still points to 0.6.x (1.x is published under `next`), so a bare `yarn add @vidstack/react` installs 0.6, which lacks the `@vidstack/react/player/layouts/default` subpath `Video` imports and fails with `Module not found`. Versions 1.14+ use static class blocks, which break Jest in repos whose Babel config can't parse them (see "Babel and newer syntax" on the Installation page).
 
+After installing, your `package.json` should list the pinned versions under `dependencies`. No `resolutions` entry is needed:
+
+```json
+// package.json
+{
+  "dependencies": {
+    "@codecademy/gamut": "^73.6.2",
+    "@vidstack/react": "~1.12.12",
+    "react-player": "^3.4.0"
+  }
+}
+```
+
 Without them, your bundler will fail with `Can't resolve '@vidstack/react'` (or `'react-player'`) when you import from `@codecademy/gamut/Video`.
 
 ```tsx
 import { Video } from '@codecademy/gamut/Video';
 ```
 
-`Video` is imported from `@codecademy/gamut/Video`, not the main `@codecademy/gamut` barrel. It depends on `react-player`, whose own dependency tree relies on package.json `"exports"` subpaths that legacy bundlers (e.g. webpack 4) can't resolve — keeping it off the main barrel means consumers who don't use `Video` never need to resolve that tree. To render video content embedded in `Markdown` text, see the [Video overrides](../Organisms/Markdown/Markdown.mdx#video-overrides) section on the Markdown docs page instead of importing `Video` directly.
+To render video content embedded in `Markdown` text, see the [Video overrides](/?path=/docs/organisms-markdown--page#video-overrides) section on the Markdown docs page instead of importing `Video` directly.
 
 ### Key Features
 
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
index e2e5edcfba..0ccb0ac683 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
+++ b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx
@@ -62,12 +62,6 @@ import { Iframe, MarkdownVideo } from '@codecademy/gamut/Video';
 />;
 ```
 
-<Canvas of={MarkdownStories.VideoOverride} />
-
-### Without the override
-
-<Canvas of={MarkdownStories.WithoutVideoOverride} />
-
 ## Inline Markdown
 
 You can also provide use the Markdown component inline.
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
index 859ddda4a0..12d3b41b0e 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
+++ b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
@@ -82,14 +82,14 @@ export const LinkOverride: Story = {
 export const VideoOverride: Story = {
   args: {
     iframeOverride: { component: Iframe },
-    text: `<iframe src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop"></iframe>`,
+    text: `<video src="https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4"></video>`,
     videoOverride: { component: MarkdownVideo },
   },
 };
 
 export const WithoutVideoOverride: Story = {
   args: {
-    text: `<iframe src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop"></iframe>`,
+    text: `<video src="https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4"></video>`,
   },
 };
 

From 2a7ffd608690db6e7604f66d93a503a95554c9d1 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 9 Oct 2026 15:22:27 -0400
Subject: [PATCH 15/17] swap stories

---
 .../lib/Organisms/Markdown/Markdown.stories.tsx   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
index 12d3b41b0e..b98a4ee240 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
+++ b/packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx
@@ -79,17 +79,14 @@ export const LinkOverride: Story = {
   },
 };
 
-export const VideoOverride: Story = {
-  args: {
-    iframeOverride: { component: Iframe },
-    text: `<video src="https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4"></video>`,
-    videoOverride: { component: MarkdownVideo },
-  },
-};
-
 export const WithoutVideoOverride: Story = {
   args: {
-    text: `<video src="https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4"></video>`,
+    text: `<video width="100%" height="100%" align="middle" controls>
+  <source src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.mp4" type="video/mp4" />
+  <track src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.srt" type="srt" label="English" kind="subtitles" srclang="en-US" default="true" />
+  Your browser does not support the video tag.
+</video>
+`,
   },
 };
 

From 5752f65979025df7952da9ccf09f7da468b45fe1 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Wed, 14 Oct 2026 10:24:30 -0400
Subject: [PATCH 16/17] fix nan

---
 .../src/Markdown/__tests__/Markdown.test.tsx  | 20 +++++++++++++++++++
 packages/gamut/src/Markdown/index.tsx         | 16 ++++++++++++++-
 .../Markdown/libs/overrides/Video/index.tsx   |  4 ++--
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index e94f18b525..f89d8f48e4 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -163,6 +163,26 @@ describe('<Markdown />', () => {
     expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
   });
 
+  it('Does not wrap a single-line video override in a paragraph', () => {
+    renderView({
+      text: `<video src="https://example.com/clip.mp4" controls></video>`,
+      videoOverride: { component: MarkdownVideo },
+    });
+    expect(document.querySelector('p div')).toBeNull();
+  });
+
+  it('Passes undefined width and height to Video when the video has none', () => {
+    // React only warns about NaN styles once per value, so check the props directly
+    const element = MarkdownVideo({
+      src: 'https://example.com/clip.mp4',
+    } as Parameters<typeof MarkdownVideo>[0]) as React.ReactElement<{
+      width?: number;
+      height?: number;
+    }>;
+    expect(element.props.width).toBeUndefined();
+    expect(element.props.height).toBeUndefined();
+  });
+
   it('Passes the video title through to the Video component when opted in', () => {
     renderView({
       text: `<video src="/example.webm" title="Example clip"></video>`,
diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx
index a06a4e09a1..6aea782ab3 100644
--- a/packages/gamut/src/Markdown/index.tsx
+++ b/packages/gamut/src/Markdown/index.tsx
@@ -35,6 +35,20 @@ const preprocessingInstructions = createPreprocessingInstructions();
 
 const isValidNode = () => true;
 
+/**
+ * Puts each <video> block on its own lines so marked emits an HTML block.
+ * A single-line <video>...</video> is parsed as paragraph text, which wraps
+ * the video's block-level output in a <p>.
+ */
+const normalizeVideoBlocks = (text: string) =>
+  text.replace(
+    /(<video\b[^>]*>)([\s\S]*?)(<\/video>)/gi,
+    (_match, open: string, inner: string, close: string) => {
+      const body = inner.trim();
+      return `\n\n${open}\n${body ? `${body}\n` : ''}${close}\n\n`;
+    }
+  );
+
 const MarkdownWrapper = styled.div<{ spacing: 'loose' | 'tight' | 'none' }>`
   ${({ theme, spacing }) => {
     const spacingStyleFunction = markdownStyles[spacing];
@@ -154,7 +168,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
     // Render markdown to html
     const rawHtml = inline
       ? marked.parseInline(text, markedOptions)
-      : marked(text, markedOptions);
+      : marked(normalizeVideoBlocks(text), markedOptions);
 
     const sanitizationConfig = {
       ...defaultSanitizationConfig,
diff --git a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
index 3403a0eba5..58c68ecb5e 100644
--- a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
@@ -19,12 +19,12 @@ export const MarkdownVideo: React.FC<MarkdownVideoProps> = (props) => {
     const videoProps = {
       autoplay: props?.autoPlay,
       controls: props?.controls,
-      height: Number(props?.height),
+      height: props?.height ? Number(props.height) : undefined,
       loop: props?.loop,
       muted: props?.muted,
       videoTitle: props?.title,
       videoUrl: props?.src,
-      width: Number(props?.width),
+      width: props?.width ? Number(props.width) : undefined,
       textTracks: props?.textTracks,
       showPlayerEmbed: props?.showPlayerEmbed,
     };

From beaeb2c55fc0fdd5ccf46baf4075d624bba5ab2f Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 15 Oct 2026 08:18:54 -0400
Subject: [PATCH 17/17] add video notw

---
 packages/styleguide/src/lib/Organisms/Markdown/example.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styleguide/src/lib/Organisms/Markdown/example.md b/packages/styleguide/src/lib/Organisms/Markdown/example.md
index 0a13f0b67f..8d9568d347 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/example.md
+++ b/packages/styleguide/src/lib/Organisms/Markdown/example.md
@@ -358,10 +358,10 @@ Vimeo and Youtube video iframes will be rendered by our Video component (if show
 ### Video
 
 `video`s with an `src` or a `source` video file will be rendered by our Video component when you pass the `videoOverride` prop; otherwise they'll render as a plain `video` tag. Videos with a `style` prop or another restricted prop will be stripped of that property.
-Insert `track` to add subtitles / captions to the video.
+Insert `track` to add subtitles / captions to the video. The below video has the override, if you'd like to see a video without the override see the story below.
 
 <video width="100%" height="100%" align="middle" controls>
   <source src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.mp4" type="video/mp4" />
   <track src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.srt" type="srt" label="English" kind="subtitles" srclang="en-US" default="true" />
-  Your browser does not support the video tag. 
+  Your browser does not support the video tag.
 </video>