diff --git a/package.json b/package.json
index 8b11bba5e8..c2e39f3dff 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.5",
     "react": "18.3.1",
@@ -86,6 +87,7 @@
     "prettier": "^2.6.2",
     "react-test-renderer": "18.3.1",
     "storybook": "^8.3.6",
+    "style-loader": "^4.0.0",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",
     "ts-jest": "29.1.1",
diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
index 21c0132482..733311f713 100644
--- a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
+++ b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
@@ -123,5 +123,6 @@ exports[`Gamut Exported Keys 1`] = `
   "useLocalQuery",
   "useSubmitState",
   "Video",
+  "VideoPlayer",
 ]
 `;
diff --git a/packages/gamut/jest.config.ts b/packages/gamut/jest.config.ts
index 4c754b1fbb..fcad1bb482 100644
--- a/packages/gamut/jest.config.ts
+++ b/packages/gamut/jest.config.ts
@@ -8,4 +8,5 @@ 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)/)"],
 });
diff --git a/packages/gamut/src/VideoPlayer/index.tsx b/packages/gamut/src/VideoPlayer/index.tsx
new file mode 100644
index 0000000000..8d5497c37b
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/index.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable gamut/no-css-standalone */
+import './styles/_vds-variables.scss';
+
+import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track, TrackProps } from '@vidstack/react';
+import { PlayerSrc, ThumbnailSrc } from '@vidstack/react/types/vidstack';
+import cx from 'classnames';
+import * as React from 'react';
+import { useState } from 'react';
+
+import { useIsMounted } from '../utils';
+import { VideoLayout } from './lib/VideoLayout';
+import styles from './styles/index.module.scss';
+
+export type VideoPlayerProps = {
+  autoplay?: boolean;
+  className?: string;
+  controls?: boolean;
+  height?: number;
+  loop?: boolean;
+  muted?: boolean;
+  onPlay?: () => void;
+  onReady?: (player: any) => void;
+  placeholderImage?: string;
+  videoTitle?: string;
+  videoUrl: PlayerSrc;
+  width?: number;
+  textTracks?: TrackProps[];
+  thumbnails?: ThumbnailSrc;
+};
+
+export const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  autoplay = false,
+  className,
+  controls = true,
+  loop = false,
+  muted = false,
+  onPlay,
+  onReady,
+  placeholderImage,
+  videoTitle,
+  videoUrl,
+  textTracks,
+  thumbnails,
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [adActive, setAdActive] = useState(false);
+  const player = React.useRef<MediaPlayerInstance>(null);
+  const isMounted = useIsMounted();
+
+  return (
+    <div
+      className={cx(styles.videoWrapper, loading && styles.loading, className)}
+    >
+      {isMounted && (
+        <MediaPlayer
+          title={videoTitle}
+          src={videoUrl} 
+          playsInline
+          ref={player}
+          aspectRatio='16:9'
+          autoPlay={autoplay}
+          loop={loop}
+          muted={muted}
+          onLoad={() => setLoading(false)}
+          onPlay={onPlay}
+          onCanPlay={onReady}
+        >
+          <MediaProvider>
+            {placeholderImage && (
+              <Poster
+                className="vds-poster"
+                alt={videoTitle}
+                src={placeholderImage}
+              />
+            )}
+            {textTracks?.map((track) => (
+              <Track {...track} key={track.src} />
+            ))}
+          </MediaProvider>
+          <VideoLayout
+            controls={controls}
+            thumbnails={thumbnails}
+            adActive={adActive}
+            setAdActive={setAdActive}
+          />
+        </MediaPlayer>
+      )}
+    </div>
+  );
+};
diff --git a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
new file mode 100644
index 0000000000..ea221d9e15
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
@@ -0,0 +1,55 @@
+import { ViewIcon, ViewOffIcon } from '@codecademy/gamut-icons';
+import { useColorModes } from '@codecademy/gamut-styles';
+import { useMediaRemote } from '@vidstack/react';
+import { DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
+
+import { IconButton } from '../../Button';
+import { customLayoutSlots } from './slots';
+import { customIcons } from './utils';
+
+export type VideoLayoutProps = {
+    controls?: boolean;
+    thumbnails?: ThumbnailSrc;
+    adActive: boolean;
+    setAdActive: (active: boolean) => void;
+  };
+  
+export const VideoLayout: React.FC<VideoLayoutProps> = ({
+    controls,
+    thumbnails,
+    adActive,
+    setAdActive,
+}) => {
+    const playerRemote = useMediaRemote();
+    const [mode] = useColorModes();
+
+    return (
+        <DefaultVideoLayout
+            colorScheme={mode}
+            hidden={!controls}
+            icons={customIcons}
+            // smallLayoutWhen={false}
+            playbackRates={[0.5, 1, 1.5, 2]}
+            thumbnails={thumbnails}
+            slots={{
+                ...customLayoutSlots,
+                beforeSettingsMenu: (
+                    <IconButton 
+                        mode='dark'
+                        icon={adActive ? ViewIcon : ViewOffIcon}
+                        tip='Audio Description'
+                        onClick={() => {
+                            if (adActive) {
+                                playerRemote.pause();
+                            } else {
+                                playerRemote.play();
+                            }
+                            setAdActive(!adActive)
+                        }}
+                    />
+                )
+            }}  
+        />
+    )
+}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/lib/slots.tsx b/packages/gamut/src/VideoPlayer/lib/slots.tsx
new file mode 100644
index 0000000000..6ade1d007d
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/slots.tsx
@@ -0,0 +1,54 @@
+import { ArrowLeftIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import { isTrackCaptionKind, SeekButton, useMediaRemote, useMediaState } from '@vidstack/react';
+import { DefaultVideoLayoutProps, DefaultVideoLayoutSlots } from '@vidstack/react/types/vidstack-react';
+
+import { Toggle } from '../../Toggle';
+
+const CaptionToggle = () => { 
+  const playerRemote = useMediaRemote()
+  const $track = useMediaState('textTrack');
+  const isOn = $track && isTrackCaptionKind($track);
+ 
+  return (
+    <Toggle
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 'var(--item-padding)',
+        color: theme.colors.text,
+      }}
+      label="Captions"
+      labelSide="left"
+      size='small'
+      checked={isOn || false}
+      onChange={() => {
+        playerRemote.toggleCaptions()
+      }} 
+    />
+  )
+}
+
+export const customLayoutSlots: DefaultVideoLayoutSlots | DefaultVideoLayoutProps = {
+  smallLayout: {
+    beforeCaptionButton: (
+      <SeekButton className="vds-button" seconds={-10}>
+        <ArrowLeftIcon className="vds-icon" />
+      </SeekButton>
+    )
+  },
+  largeLayout: {
+    afterPlayButton: (
+      <SeekButton className="vds-button" seconds={-10}>
+        <ArrowLeftIcon className="vds-icon" />
+      </SeekButton>
+    ),
+  },
+  googleCastButton: null,
+  beforeSettingsMenuStartItems: (
+    <CaptionToggle />
+  )
+}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/lib/utils.tsx b/packages/gamut/src/VideoPlayer/lib/utils.tsx
new file mode 100644
index 0000000000..4dcdd402e8
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/utils.tsx
@@ -0,0 +1,11 @@
+import { PauseIcon, PlayIcon, RefreshIcon } from '@codecademy/gamut-icons';
+import { defaultLayoutIcons, DefaultPlayButtonIcons } from '@vidstack/react/player/layouts/default';
+
+export const customIcons = {
+    ...defaultLayoutIcons,
+    PlayButton: { 
+        Play: PlayIcon as DefaultPlayButtonIcons['Play'],
+        Pause: PauseIcon as DefaultPlayButtonIcons['Pause'],
+        Replay: RefreshIcon as DefaultPlayButtonIcons['Replay']
+    }
+} 
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss b/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
new file mode 100644
index 0000000000..696c76c86d
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
@@ -0,0 +1,58 @@
+@import "@vidstack/react/player/styles/default/theme.css";
+@import "@vidstack/react/player/styles/default/layouts/video.css";
+@import "@vidstack/react/player/styles/default/layouts/audio.css";
+
+.vds-video-layout {
+    --video-font-family: "Apercu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+    --media-button-border-radius: 0;
+    --video-brand: #f5f5f5;
+    --video-controls-color: #f5f5f5;
+    --video-focus-ring-color: rgb(78 156 246);
+    --video-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
+    
+    --video-bg: black;
+    --video-border-radius: 6px;
+    --video-border: 1px solid rgb(255 255 255 / 0.1);
+    
+    --video-fullscreen-chapter-title-font-size: 16px;
+    --video-gesture-seek-width: 20%;
+    
+    /* Load. */
+    --video-load-button-size: 56px;
+    --video-load-button-border: var(--color);
+    --video-load-button-bg: var(--media-brand);
+    --video-load-button-border-radius: 100%;
+    
+    --video-sm-load-button-size: 48px;
+    
+    /* Buttons. */
+    --video-sm-button-size: 32px;
+    --video-sm-play-button-size: 40px;
+    --video-sm-play-button-transform: translateY(25%);
+    --video-sm-play-button-bg: rgba(0 0 0 / 0.6);
+    
+    /* Sliders. */
+    --video-slider-thumbnail-border: 1px solid #f5f5f5;
+    --video-slider-thumbnail-border-radius: 2px;
+    --video-volume-slider-max-width: 72px;
+    
+    --video-sm-slider-focus-track-height: 12px;
+    
+    /* Time. */
+    --video-time-bg: unset;
+    --video-fullscreen-time-font-size: 16px;
+    
+    --video-sm-time-font-size: 14px;
+    --video-sm-start-duration-bg: rgba(0 0 0 / 0.64);
+    --video-sm-start-duration-padding: 3px 6px;
+    --video-sm-start-duration-color: var(--video: controls-color);
+    
+    /* Captions. */
+    --video-captions-offset: 78px;
+    --video-captions-transition: bottom 0.15s linear;
+    
+    --video-sm-captions-offset: 48px;
+    --video-lg-fullscreen-captions-offset: 54px;
+    
+    --video-sm-captions-offset: 48px;
+  }
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/index.module.scss b/packages/gamut/src/VideoPlayer/styles/index.module.scss
new file mode 100644
index 0000000000..c0eb4f0446
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/styles/index.module.scss
@@ -0,0 +1,6 @@
+@import "~@codecademy/gamut-styles/utils";
+
+.videoWrapper {
+  position: relative;
+  width: 100%;
+}
diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx
index dd3b53107f..9fb8f4b034 100644
--- a/packages/gamut/src/index.tsx
+++ b/packages/gamut/src/index.tsx
@@ -57,3 +57,4 @@ export * from './Typography/Text';
 export type { HeadingTags } from './Typography/types';
 export * from './utils';
 export * from './Video';
+export * from './VideoPlayer';
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
new file mode 100644
index 0000000000..3f007132ef
--- /dev/null
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
@@ -0,0 +1,58 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as VideoStories from './VideoPlayer.stories';
+
+export const parameters = {
+  subtitle: `A video player
+given a video URL.`,
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
+  },
+  status: 'updating',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Video/index.tsx',
+  },
+};
+
+<Meta of={VideoStories} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+Use the Video Player that is accessible and has support for captions.
+
+### Best practices:
+
+- Some videos might have settings where you cannot share/embed them, make sure to check the video URL before making the Video go live.
+
+## Variants
+
+### Custom Video Link
+
+Here is an example with a custom video and placeholder.
+
+<Canvas of={VideoStories.VideoWithPlaceholder} />
+
+### Youtube link
+
+The following video has a YouTube URL.
+
+<Canvas of={VideoStories.Default} />
+
+### Vimeo
+
+Here is an example with a Vimeo URL.
+
+<Canvas of={VideoStories.Vimeo} />
+
+## Playground
+
+<Canvas sourceState="shown" of={VideoStories.Default} />
+
+<Controls />
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
new file mode 100644
index 0000000000..aaeb1c7fa8
--- /dev/null
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
@@ -0,0 +1,51 @@
+import { VideoPlayer } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof VideoPlayer> = {
+  component: VideoPlayer,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof VideoPlayer>;
+
+export const Default: Story = {
+  args: {
+    videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0',
+    videoTitle: 'Intro to Programming: Loops',
+  },
+};
+
+export const Vimeo: Story = {
+  args: {
+    videoUrl:"https://vimeo.com/773539409",
+    videoTitle:"CODECADEMY | Develop Yourself",
+  },
+};
+
+export const VideoWithPlaceholder: Story = {
+  args: {
+    videoUrl: "https://files.vidstack.io/sprite-fight/720p.mp4",
+    videoTitle: "Sprite Fight",
+    placeholderImage: "https://files.vidstack.io/sprite-fight/poster.webp",
+    textTracks: [{
+      "src": "https://files.vidstack.io/sprite-fight/subs/english.vtt",
+      "label": "English",
+      "language": "en-US",
+      "kind": "subtitles"
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/subs/spanish.vtt",
+      "label": "Spanish",
+      "language": "es-ES",
+      "kind": "subtitles",
+      "default": true
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/chapters.vtt",
+      "language": "en-US",
+      "kind": "chapters",
+      "type": "vtt",
+      "default": true
+    }],
+    thumbnails: "https://files.vidstack.io/sprite-fight/thumbnails.vtt"
+  },
+};
diff --git a/yarn.lock b/yarn.lock
index 2ac8370d14..18eb45f8ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1553,6 +1553,14 @@
     "@floating-ui/core" "^1.6.0"
     "@floating-ui/utils" "^0.2.8"
 
+"@floating-ui/dom@^1.6.10":
+  version "1.6.12"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
@@ -1957,6 +1965,11 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.0.0"
 
+"@maverick-js/signals@^5.10.3":
+  version "5.11.5"
+  resolved "https://registry.npmjs.org/@maverick-js/signals/-/signals-5.11.5.tgz#747490ad174320236378d791600e6fadf2c3072b"
+  integrity sha512-/GO94awrwN9ROYZDMTeByordjvbhcm3CMvB/2aL/sEUy9Va8nM/2GmNgOOe+rrooTGnz8/DzO73xomuBRrnYWw==
+
 "@mdx-js/react@^3.0.0", "@mdx-js/react@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
@@ -4063,6 +4076,14 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vidstack/react@^1.12.12":
+  version "1.12.12"
+  resolved "https://registry.npmjs.org/@vidstack/react/-/react-1.12.12.tgz#abf8b794edb461bc4b7de6e97be355a19d75e102"
+  integrity sha512-rEwCkZdp/K0FopUU76lgYJqzOZa3AGM2FumQnTPPSCP9jwShYReY9mXgl4/UP5CH3v7MkaVl5ZT67rhfjPxx9Q==
+  dependencies:
+    "@floating-ui/dom" "^1.6.10"
+    media-captions "^1.0.4"
+
 "@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
   version "1.12.1"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
@@ -10338,6 +10359,14 @@ marked@^4.3.0:
   resolved "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
+maverick.js@0.37.0:
+  version "0.37.0"
+  resolved "https://registry.npmjs.org/maverick.js/-/maverick.js-0.37.0.tgz#3dc371786540ba5cc327179a268b60c165a317d8"
+  integrity sha512-1Dk/9rienLiihlktVvH04ADC2UJTMflC1fOMVQCCaQAaz7hgzDI5i0p/arFbDM52hFFiIcq4RdXtYz47SgsLgw==
+  dependencies:
+    "@maverick-js/signals" "^5.10.3"
+    type-fest "^3.8.0"
+
 mdast-util-compact@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
@@ -10365,6 +10394,16 @@ mdn-data@2.0.4:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+media-captions@0.0.18:
+  version "0.0.18"
+  resolved "https://registry.npmjs.org/media-captions/-/media-captions-0.0.18.tgz#ad2de78b06d6d222407057279a1595f8b0408a7e"
+  integrity sha512-JW18P6FuHdyLSGwC4TQ0kF3WdNj/+wMw2cKOb8BnmY6vSJGtnwJ+vkYj+IjHOV34j3XMc70HDeB/QYKR7E7fuQ==
+
+media-captions@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz#aaacb6a554f7549fc7308b6b7cf766686cf42fad"
+  integrity sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -13625,16 +13664,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13738,14 +13768,7 @@ stringify-entities@^3.0.0:
     character-entities-legacy "^1.0.0"
     xtend "^4.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13824,6 +13847,11 @@ style-loader@^3.3.0, style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
   integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
 
+style-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
+  integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
+
 style-value-types@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
@@ -14374,6 +14402,11 @@ type-fest@^2.19.0, type-fest@~2.19:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
+type-fest@^3.8.0:
+  version "3.13.1"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -14845,6 +14878,15 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+vidstack@^0.6.15:
+  version "0.6.15"
+  resolved "https://registry.npmjs.org/vidstack/-/vidstack-0.6.15.tgz#478ce7f6f93615002e4ef10e70eec42078578437"
+  integrity sha512-pI2aixBuOpu/LSnRgNJ40tU/KFW+x1X+O2bW1hz946ZZShDM5oqRXF9pavDOuckHAHPgUN9HYUr9vUNTBUPF1Q==
+  dependencies:
+    maverick.js "0.37.0"
+    media-captions "0.0.18"
+    type-fest "^3.8.0"
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
@@ -15132,7 +15174,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -15150,15 +15192,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"