From 57c406d2c5acec148fdc5dc696388ed2d2f180c7 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Wed, 15 Jul 2026 09:41:48 -0700
Subject: [PATCH] refactor(site): centralize demo media sources (#1829)

---
 site/CLAUDE.md                                |  2 +
 site/astro.config.mjs                         |  3 +-
 site/scripts/replace-demo-placeholders.ts     | 59 +++++++++++++++
 .../tests/replace-demo-placeholders.test.ts   | 75 +++++++++++++++++++
 .../airplay-button/html/css/BasicUsage.html   |  2 +-
 .../airplay-button/react/css/BasicUsage.tsx   |  8 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  2 +-
 .../background-video/html/css/BasicUsage.html |  2 +-
 .../background-video/react/css/BasicUsage.tsx |  2 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../captions-button/html/css/BasicUsage.html  |  2 +-
 .../captions-button/react/css/BasicUsage.tsx  |  8 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../cast-button/html/css/BasicUsage.html      |  2 +-
 .../cast-button/react/css/BasicUsage.tsx      |  8 +-
 .../demos/controls/html/css/BasicUsage.html   |  2 +-
 .../demos/controls/react/css/BasicUsage.tsx   |  8 +-
 .../create-player/react/css/BasicUsage.tsx    |  7 +-
 .../demos/dash-video/html/css/BasicUsage.html |  2 +-
 .../demos/dash-video/react/css/BasicUsage.tsx | 11 +--
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../hlsjs-video/html/css/BasicUsage.html      |  2 +-
 .../hlsjs-video/react/css/BasicUsage.tsx      | 11 +--
 .../html/css/BasicUsage.html                  |  2 +-
 .../docs/demos/menu/html/css/BasicUsage.html  |  2 +-
 .../docs/demos/menu/react/css/BasicUsage.tsx  |  2 +-
 .../mute-button/html/css/BasicUsage.html      |  2 +-
 .../mute-button/html/css/VolumeLevels.html    |  2 +-
 .../mute-button/react/css/BasicUsage.tsx      |  8 +-
 .../mute-button/react/css/VolumeLevels.tsx    |  8 +-
 .../demos/mux-audio/html/css/BasicUsage.html  |  2 +-
 .../demos/mux-audio/react/css/BasicUsage.tsx  |  9 +--
 .../demos/mux-video/html/css/BasicUsage.html  |  2 +-
 .../demos/mux-video/react/css/BasicUsage.tsx  |  2 +-
 .../native-hls-video/html/css/BasicUsage.html |  2 +-
 .../native-hls-video/react/css/BasicUsage.tsx | 11 +--
 .../demos/pip-button/html/css/BasicUsage.html |  2 +-
 .../demos/pip-button/react/css/BasicUsage.tsx |  8 +-
 .../play-button/html/css/BasicUsage.html      |  2 +-
 .../play-button/react/css/BasicUsage.tsx      |  7 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../demos/popover/html/css/BasicUsage.html    |  2 +-
 .../demos/popover/react/css/BasicUsage.tsx    |  8 +-
 .../demos/poster/html/css/BasicUsage.html     |  4 +-
 .../demos/poster/react/css/BasicUsage.tsx     |  7 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  2 +-
 .../seek-button/html/css/BasicUsage.html      |  2 +-
 .../seek-button/react/css/BasicUsage.tsx      |  8 +-
 .../html/css/BasicUsage.html                  |  2 +-
 .../react/css/BasicUsage.tsx                  |  8 +-
 .../simple-hls-video/html/css/BasicUsage.html |  2 +-
 .../simple-hls-video/react/css/BasicUsage.tsx | 11 +--
 .../demos/thumbnail/html/css/BasicUsage.html  |  2 +-
 .../demos/thumbnail/react/css/BasicUsage.tsx  |  2 +-
 .../thumbnail/react/css/JsonSpriteUsage.tsx   |  6 +-
 .../demos/thumbnail/react/css/JsonUsage.tsx   |  6 +-
 .../demos/time-slider/html/css/WithParts.html |  2 +-
 .../demos/time-slider/react/css/WithParts.tsx |  8 +-
 .../demos/time/html/css/CurrentDuration.html  |  2 +-
 .../docs/demos/time/html/css/CurrentTime.html |  2 +-
 .../time/html/css/CustomNegativeSign.html     |  2 +-
 .../demos/time/html/css/CustomSeparator.html  |  2 +-
 .../docs/demos/time/html/css/Remaining.html   |  2 +-
 .../demos/time/react/css/CurrentDuration.tsx  |  8 +-
 .../docs/demos/time/react/css/CurrentTime.tsx |  8 +-
 .../time/react/css/CustomNegativeSign.tsx     |  8 +-
 .../demos/time/react/css/CustomSeparator.tsx  |  8 +-
 .../docs/demos/time/react/css/Remaining.tsx   |  8 +-
 .../demos/use-media/react/css/BasicUsage.tsx  |  8 +-
 .../demos/use-player/react/css/Selector.tsx   |  8 +-
 .../use-player/react/css/StoreAccess.tsx      |  8 +-
 .../demos/use-store/react/css/Selector.tsx    |  8 +-
 .../demos/use-store/react/css/StoreAccess.tsx |  8 +-
 .../volume-slider/html/css/WithParts.html     |  2 +-
 .../volume-slider/react/css/WithParts.tsx     |  8 +-
 site/src/consts.ts                            | 20 +++--
 .../docs/reference/write-references.mdx       | 17 ++++-
 site/vitest.config.ts                         |  3 +-
 87 files changed, 256 insertions(+), 313 deletions(-)
 create mode 100644 site/scripts/replace-demo-placeholders.ts
 create mode 100644 site/scripts/tests/replace-demo-placeholders.test.ts

diff --git a/site/CLAUDE.md b/site/CLAUDE.md
index 0a438910..4bd29c36 100644
--- a/site/CLAUDE.md
+++ b/site/CLAUDE.md
@@ -252,6 +252,8 @@ import basicUsageCss from "@/components/docs/demos/play-button/react/css/BasicUs
 
 Four files per demo: `.html` (markup only), `.css` (styles), `.ts` (custom element registration), and `.astro` (wrapper that ties them together). The `.astro` wrapper is needed because only Astro `<script>` tags go through Vite's bundling pipeline — MDX `<script>` tags compile as JSX and aren't bundled.
 
+Media URLs in `.html` and `.tsx` demo files use `{{VJS*}}` placeholders defined in `scripts/replace-demo-placeholders.ts`. The Vite plugin resolves them in both live demos and source tabs. Do not hardcode shared media URLs in demos.
+
 **`.astro` wrapper** (renders HTML, bundles the `.ts` script — no CSS import):
 ```astro
 ---
diff --git a/site/astro.config.mjs b/site/astro.config.mjs
index 85b8b074..e90f4f92 100644
--- a/site/astro.config.mjs
+++ b/site/astro.config.mjs
@@ -25,6 +25,7 @@ import tsx from 'shiki/langs/tsx.mjs';
 import yaml from 'shiki/langs/yaml.mjs';
 import svgr from 'vite-plugin-svgr';
 import llmsMarkdown from './integrations/llms-markdown';
+import { demoPlaceholderPlugin } from './scripts/replace-demo-placeholders.ts';
 import { PRERELEASE_URL, PRODUCTION_URL } from './src/consts.ts';
 import { satteriCodeFrame } from './src/utils/satteriCodeFrame';
 import { satteriConditionalHeadings } from './src/utils/satteriConditionalHeadings';
@@ -169,7 +170,7 @@ export default defineConfig({
     // SVG → React component transform. We use SVGR instead of Astro's
     // experimental svg feature because: (1) React islands need React
     // components, and (2) SVGR runs SVGO for automatic SVG optimization.
-    plugins: [tailwindcss(), svgr()],
+    plugins: [demoPlaceholderPlugin(), tailwindcss(), svgr()],
     optimizeDeps: {
       // @resvg/resvg-js loads a native .node binding for the server-only OG
       // image route, so Vite's dev optimizer must leave it external.
diff --git a/site/scripts/replace-demo-placeholders.ts b/site/scripts/replace-demo-placeholders.ts
new file mode 100644
index 00000000..bd0817ab
--- /dev/null
+++ b/site/scripts/replace-demo-placeholders.ts
@@ -0,0 +1,59 @@
+import type { Plugin } from 'vite';
+import {
+  VJS8_DEMO_VIDEO,
+  VJS10_DEMO_BACKGROUND_VIDEO_MP4,
+  VJS10_DEMO_DASH,
+  VJS10_DEMO_POSTER,
+  VJS10_DEMO_STORYBOARD,
+  VJS10_DEMO_VIDEO,
+  VJS10_MULTI_AUDIO_DEMO_VIDEO,
+} from '../src/consts.ts';
+
+const DEMOS_DIRECTORY = '/src/components/docs/demos/';
+
+export const DEMO_PLACEHOLDERS = {
+  VJS8_DEMO_VIDEO_HLS: VJS8_DEMO_VIDEO.hls,
+  VJS10_DEMO_BACKGROUND_VIDEO_MP4: VJS10_DEMO_BACKGROUND_VIDEO_MP4,
+  VJS10_DEMO_DASH: VJS10_DEMO_DASH,
+  VJS10_DEMO_POSTER: VJS10_DEMO_POSTER,
+  VJS10_DEMO_STORYBOARD: VJS10_DEMO_STORYBOARD,
+  VJS10_DEMO_VIDEO_HLS: VJS10_DEMO_VIDEO.hls,
+  VJS10_DEMO_VIDEO_MP4: VJS10_DEMO_VIDEO.mp4,
+  VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS: VJS10_MULTI_AUDIO_DEMO_VIDEO.hls,
+} as const;
+
+const PLACEHOLDER_PATTERN = /{{([A-Z0-9_]+)}}/g;
+
+/** Resolve the shared media source placeholders used in demo snippets. */
+export function replaceDemoPlaceholders(source: string): string {
+  return source.replace(PLACEHOLDER_PATTERN, (placeholder, name: string) => {
+    const value = DEMO_PLACEHOLDERS[name as keyof typeof DEMO_PLACEHOLDERS];
+
+    if (!value) {
+      throw new Error(`Unknown demo placeholder: ${placeholder}`);
+    }
+
+    return value;
+  });
+}
+
+export function transformDemoPlaceholders(source: string, id: string): string | null {
+  const [filePath, query = ''] = id.split('?', 2);
+  const isRawHtml = filePath.endsWith('.html') && new URLSearchParams(query).has('raw');
+  const isReactDemo = filePath.endsWith('.tsx');
+
+  if (!filePath.includes(DEMOS_DIRECTORY) || (!isRawHtml && !isReactDemo)) {
+    return null;
+  }
+
+  return replaceDemoPlaceholders(source);
+}
+
+/** Resolve placeholders in HTML and React demos for the site build and dev server. */
+export function demoPlaceholderPlugin() {
+  return {
+    name: 'videojs:demo-placeholders',
+    enforce: 'pre',
+    transform: transformDemoPlaceholders,
+  } satisfies Plugin;
+}
diff --git a/site/scripts/tests/replace-demo-placeholders.test.ts b/site/scripts/tests/replace-demo-placeholders.test.ts
new file mode 100644
index 00000000..f99059ca
--- /dev/null
+++ b/site/scripts/tests/replace-demo-placeholders.test.ts
@@ -0,0 +1,75 @@
+import { globSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import {
+  DEMO_PLACEHOLDERS,
+  demoPlaceholderPlugin,
+  replaceDemoPlaceholders,
+  transformDemoPlaceholders,
+} from '../replace-demo-placeholders.ts';
+
+const DEMOS_DIRECTORY = resolve('src/components/docs/demos');
+
+describe('replaceDemoPlaceholders', () => {
+  it('resolves known placeholders', () => {
+    const source = Object.keys(DEMO_PLACEHOLDERS)
+      .map((name) => `{{${name}}}`)
+      .join(' ');
+
+    expect(replaceDemoPlaceholders(source)).toBe(Object.values(DEMO_PLACEHOLDERS).join(' '));
+  });
+
+  it('throws for unknown placeholders', () => {
+    expect(() => replaceDemoPlaceholders('{{UNKNOWN_DEMO_VIDEO}}')).toThrow(
+      'Unknown demo placeholder: {{UNKNOWN_DEMO_VIDEO}}'
+    );
+  });
+});
+
+describe('demoPlaceholderPlugin', () => {
+  it('registers the demo transform as a pre-transform', () => {
+    expect(demoPlaceholderPlugin()).toMatchObject({
+      enforce: 'pre',
+      transform: transformDemoPlaceholders,
+    });
+  });
+});
+
+describe('transformDemoPlaceholders', () => {
+  it('resolves placeholders in raw HTML demo imports', () => {
+    expect(
+      transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', '/site/src/components/docs/demos/play-button.html?raw')
+    ).toBe(DEMO_PLACEHOLDERS.VJS10_DEMO_VIDEO_MP4);
+  });
+
+  it.each([
+    '/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx',
+    '/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw',
+  ])('resolves placeholders in React demo import %s', (id) => {
+    expect(transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', id)).toBe(DEMO_PLACEHOLDERS.VJS10_DEMO_VIDEO_MP4);
+  });
+
+  it.each([
+    '/site/src/components/docs/demos/play-button.html?draw=true',
+    '/site/src/components/docs/demos/play-button.ts?raw',
+    '/site/src/components/play-button.html?raw',
+    '/site/src/components/play-button.tsx',
+  ])('ignores unsupported demo import %s', (id) => {
+    expect(transformDemoPlaceholders('{{VJS10_DEMO_VIDEO_MP4}}', id)).toBeNull();
+  });
+});
+
+describe('demo placeholders', () => {
+  it('does not hardcode shared demo media URLs', () => {
+    const demoFiles = [
+      ...globSync('**/*.html', { cwd: DEMOS_DIRECTORY }),
+      ...globSync('**/*.tsx', { cwd: DEMOS_DIRECTORY }),
+    ];
+    const hardcodedSources = demoFiles.filter((file) => {
+      const source = readFileSync(resolve(DEMOS_DIRECTORY, file), 'utf8');
+      return /https:\/\/(?:(?:stream|image)\.mux\.com|dash\.akamaized\.net|vimeo\.com)\//.test(source);
+    });
+
+    expect(hardcodedSources).toEqual([]);
+  });
+});
diff --git a/site/src/components/docs/demos/airplay-button/html/css/BasicUsage.html b/site/src/components/docs/demos/airplay-button/html/css/BasicUsage.html
index 2e5d839f..721519e3 100644
--- a/site/src/components/docs/demos/airplay-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/airplay-button/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <video-player class="video-player">
     <media-container>
-        <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted
+        <video src="{{VJS10_DEMO_VIDEO_MP4}}" autoplay muted
             playsinline loop></video>
         <media-airplay-button class="media-airplay-button">
             <span class="connected">Stop AirPlay</span>
diff --git a/site/src/components/docs/demos/airplay-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/airplay-button/react/css/BasicUsage.tsx
index cbcbd319..c3d38dfd 100644
--- a/site/src/components/docs/demos/airplay-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/airplay-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <AirPlayButton
           className="media-airplay-button"
           render={(props, state) => {
diff --git a/site/src/components/docs/demos/audio-track-radio-group/html/css/BasicUsage.html b/site/src/components/docs/demos/audio-track-radio-group/html/css/BasicUsage.html
index ff36c184..a83c617a 100644
--- a/site/src/components/docs/demos/audio-track-radio-group/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/audio-track-radio-group/html/css/BasicUsage.html
@@ -2,7 +2,7 @@
     <media-container>
         <hlsjs-video
             class="video-media"
-            src="https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8"
+            src="{{VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS}}"
             autoplay
             crossorigin="anonymous"
             muted
diff --git a/site/src/components/docs/demos/audio-track-radio-group/react/css/BasicUsage.tsx b/site/src/components/docs/demos/audio-track-radio-group/react/css/BasicUsage.tsx
index d40a61be..4a8ae2a5 100644
--- a/site/src/components/docs/demos/audio-track-radio-group/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/audio-track-radio-group/react/css/BasicUsage.tsx
@@ -4,7 +4,7 @@ import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
 const Player = createPlayer({ features: videoFeatures });
-const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';
+const src = '{{VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS}}';
 
 function AudioMenu(): ReactNode {
   const audioTrack = useAudioTrackOptions();
diff --git a/site/src/components/docs/demos/background-video/html/css/BasicUsage.html b/site/src/components/docs/demos/background-video/html/css/BasicUsage.html
index 23e7c55f..f690eaa7 100644
--- a/site/src/components/docs/demos/background-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/background-video/html/css/BasicUsage.html
@@ -1,5 +1,5 @@
 <div class="container">
     <background-video
-        src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"
+        src="{{VJS10_DEMO_BACKGROUND_VIDEO_MP4}}"
     ></background-video>
 </div>
diff --git a/site/src/components/docs/demos/background-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/background-video/react/css/BasicUsage.tsx
index 71c1c572..54e5ff78 100644
--- a/site/src/components/docs/demos/background-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/background-video/react/css/BasicUsage.tsx
@@ -3,7 +3,7 @@ import { BackgroundVideo } from '@videojs/react/media/background-video';
 export default function BasicUsage() {
   return (
     <div className="container">
-      <BackgroundVideo src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4" />
+      <BackgroundVideo src="{{VJS10_DEMO_BACKGROUND_VIDEO_MP4}}" />
     </div>
   );
 }
diff --git a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
index 4132f4ab..03407ef9 100644
--- a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
index bb988b97..a4473301 100644
--- a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <BufferingIndicator
           className="media-buffering-indicator"
           render={(props, state) => <div {...props}>{state.visible && <div className="spinner" />}</div>}
diff --git a/site/src/components/docs/demos/captions-button/html/css/BasicUsage.html b/site/src/components/docs/demos/captions-button/html/css/BasicUsage.html
index e3a16b33..dfae5516 100644
--- a/site/src/components/docs/demos/captions-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/captions-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/captions-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/captions-button/react/css/BasicUsage.tsx
index f5ba1170..c0d29f9b 100644
--- a/site/src/components/docs/demos/captions-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/captions-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        >
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop>
           <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
         </Video>
         <CaptionsButton
diff --git a/site/src/components/docs/demos/captions-radio-group/html/css/BasicUsage.html b/site/src/components/docs/demos/captions-radio-group/html/css/BasicUsage.html
index 0fa18623..d752c67e 100644
--- a/site/src/components/docs/demos/captions-radio-group/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/captions-radio-group/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/captions-radio-group/react/css/BasicUsage.tsx b/site/src/components/docs/demos/captions-radio-group/react/css/BasicUsage.tsx
index 0c76fb75..4fb65531 100644
--- a/site/src/components/docs/demos/captions-radio-group/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/captions-radio-group/react/css/BasicUsage.tsx
@@ -38,13 +38,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        >
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop>
           <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
           <track kind="subtitles" src="/docs/demos/captions-button/captions.vtt" srcLang="es" label="Spanish" />
         </Video>
diff --git a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html
index 4d4134e6..a8dbd7dc 100644
--- a/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/cast-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <hlsjs-video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+            src="{{VJS10_DEMO_VIDEO_HLS}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx
index 527b05fb..197b7b8d 100644
--- a/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/cast-button/react/css/BasicUsage.tsx
@@ -8,13 +8,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <HlsJsVideo
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <HlsJsVideo src="{{VJS10_DEMO_VIDEO_HLS}}" autoPlay muted playsInline loop />
         <CastButton
           className="media-cast-button"
           render={(props, state) => (
diff --git a/site/src/components/docs/demos/controls/html/css/BasicUsage.html b/site/src/components/docs/demos/controls/html/css/BasicUsage.html
index d20453af..a3239cec 100644
--- a/site/src/components/docs/demos/controls/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/controls/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
index a6574f53..9e67643f 100644
--- a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
 
         <Controls.Root className="media-controls">
           <Controls.Group className="controls-group" aria-label="Playback controls">
diff --git a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
index fb462102..f9777452 100644
--- a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
@@ -22,12 +22,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline />
         <Controls />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/dash-video/html/css/BasicUsage.html b/site/src/components/docs/demos/dash-video/html/css/BasicUsage.html
index 91c05e60..0d36435d 100644
--- a/site/src/components/docs/demos/dash-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/dash-video/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <media-container class="media-container">
     <dash-video
-        src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
+        src="{{VJS10_DEMO_DASH}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/dash-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/dash-video/react/css/BasicUsage.tsx
index 88874ad8..26b5c514 100644
--- a/site/src/components/docs/demos/dash-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/dash-video/react/css/BasicUsage.tsx
@@ -1,14 +1,5 @@
 import { DashVideo } from '@videojs/react/media/dash-video';
 
 export default function BasicUsage() {
-  return (
-    <DashVideo
-      className="dash-video"
-      src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
+  return <DashVideo className="dash-video" src="{{VJS10_DEMO_DASH}}" autoPlay muted playsInline loop />;
 }
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
index 0099699a..47fa5b8b 100644
--- a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
index 44e1dbda..67877cf6 100644
--- a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <FullscreenButton
           className="media-fullscreen-button"
           render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
diff --git a/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.html b/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.html
index e4faf82e..193e7dd3 100644
--- a/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/hlsjs-video/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <media-container class="media-container">
     <hlsjs-video
-        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        src="{{VJS10_DEMO_VIDEO_HLS}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx
index aa6050ea..a20c8a67 100644
--- a/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx
@@ -1,14 +1,5 @@
 import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
 
 export default function BasicUsage() {
-  return (
-    <HlsJsVideo
-      className="hlsjs-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
+  return <HlsJsVideo className="hlsjs-video" src="{{VJS10_DEMO_VIDEO_HLS}}" autoPlay muted playsInline loop />;
 }
diff --git a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
index 2526b1a9..37afe7ad 100644
--- a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <demo-video-player class="demo-video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/menu/html/css/BasicUsage.html b/site/src/components/docs/demos/menu/html/css/BasicUsage.html
index de421cf6..b118c54b 100644
--- a/site/src/components/docs/demos/menu/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/menu/html/css/BasicUsage.html
@@ -2,7 +2,7 @@
     <media-container>
         <hlsjs-video
             class="video-media"
-            src="https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8"
+            src="{{VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS}}"
             autoplay
             crossorigin="anonymous"
             muted
diff --git a/site/src/components/docs/demos/menu/react/css/BasicUsage.tsx b/site/src/components/docs/demos/menu/react/css/BasicUsage.tsx
index 30b1f799..abfa4748 100644
--- a/site/src/components/docs/demos/menu/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/menu/react/css/BasicUsage.tsx
@@ -11,7 +11,7 @@ import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
 const Player = createPlayer({ features: videoFeatures });
-const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';
+const src = '{{VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS}}';
 
 function SettingsMenu(): ReactNode {
   const playbackRate = usePlaybackRateOptions();
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
index 0157db96..6610abff 100644
--- a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
index 5217bfaa..9d1b5669 100644
--- a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
+++ b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
index 90d568ec..253ea05a 100644
--- a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
diff --git a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
index a4c0662e..88fbf953 100644
--- a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
+++ b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
@@ -7,13 +7,7 @@ export default function VolumeLevels() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => (
diff --git a/site/src/components/docs/demos/mux-audio/html/css/BasicUsage.html b/site/src/components/docs/demos/mux-audio/html/css/BasicUsage.html
index 08f71a91..e7f22320 100644
--- a/site/src/components/docs/demos/mux-audio/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/mux-audio/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <mux-audio
     class="mux-audio"
-    src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+    src="{{VJS10_DEMO_VIDEO_HLS}}"
     crossorigin="anonymous"
     controls
 ></mux-audio>
diff --git a/site/src/components/docs/demos/mux-audio/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mux-audio/react/css/BasicUsage.tsx
index 71835517..eeb8d158 100644
--- a/site/src/components/docs/demos/mux-audio/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/mux-audio/react/css/BasicUsage.tsx
@@ -1,12 +1,5 @@
 import { MuxAudio } from '@videojs/react/media/mux-audio';
 
 export default function BasicUsage() {
-  return (
-    <MuxAudio
-      className="mux-audio"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      crossOrigin="anonymous"
-      controls
-    />
-  );
+  return <MuxAudio className="mux-audio" src="{{VJS10_DEMO_VIDEO_HLS}}" crossOrigin="anonymous" controls />;
 }
diff --git a/site/src/components/docs/demos/mux-video/html/css/BasicUsage.html b/site/src/components/docs/demos/mux-video/html/css/BasicUsage.html
index 4c4973ba..d05d4fae 100644
--- a/site/src/components/docs/demos/mux-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/mux-video/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <media-container class="media-container">
     <mux-video
-        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        src="{{VJS10_DEMO_VIDEO_HLS}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/mux-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mux-video/react/css/BasicUsage.tsx
index 26deb505..470e79d1 100644
--- a/site/src/components/docs/demos/mux-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/mux-video/react/css/BasicUsage.tsx
@@ -4,7 +4,7 @@ export default function BasicUsage() {
   return (
     <MuxVideo
       className="mux-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      src="{{VJS10_DEMO_VIDEO_HLS}}"
       autoPlay
       muted
       playsInline
diff --git a/site/src/components/docs/demos/native-hls-video/html/css/BasicUsage.html b/site/src/components/docs/demos/native-hls-video/html/css/BasicUsage.html
index 5ad4619e..bfec420f 100644
--- a/site/src/components/docs/demos/native-hls-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/native-hls-video/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <media-container class="media-container">
     <native-hls-video
-        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        src="{{VJS10_DEMO_VIDEO_HLS}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx
index 84ba403f..a98c149c 100644
--- a/site/src/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx
@@ -1,14 +1,5 @@
 import { NativeHlsVideo } from '@videojs/react/media/native-hls-video';
 
 export default function BasicUsage() {
-  return (
-    <NativeHlsVideo
-      className="native-hls-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
+  return <NativeHlsVideo className="native-hls-video" src="{{VJS10_DEMO_VIDEO_HLS}}" autoPlay muted playsInline loop />;
 }
diff --git a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
index e26d65ed..860752dc 100644
--- a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
index d673b2ca..89cb34a6 100644
--- a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <PiPButton
           className="media-pip-button"
           render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
index 57f79776..e5e1a842 100644
--- a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
index ac5b4c1c..1ce9ac72 100644
--- a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
@@ -7,12 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline />
         <PlayButton
           className="media-play-button"
           render={(props, state) => (
diff --git a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
index 40d98905..93befda6 100644
--- a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <video-player class="video-player">
     <video
-        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+        src="{{VJS10_DEMO_VIDEO_MP4}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
index 2c7f07c0..72151a74 100644
--- a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <PlaybackRateButton
           className="media-playback-rate-button"
           render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
diff --git a/site/src/components/docs/demos/playback-rate-radio-group/html/css/BasicUsage.html b/site/src/components/docs/demos/playback-rate-radio-group/html/css/BasicUsage.html
index c08984bb..b7670f11 100644
--- a/site/src/components/docs/demos/playback-rate-radio-group/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/playback-rate-radio-group/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/playback-rate-radio-group/react/css/BasicUsage.tsx b/site/src/components/docs/demos/playback-rate-radio-group/react/css/BasicUsage.tsx
index 81653e3a..89e90160 100644
--- a/site/src/components/docs/demos/playback-rate-radio-group/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/playback-rate-radio-group/react/css/BasicUsage.tsx
@@ -38,13 +38,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <div className="menu-bar">
           <SpeedMenu />
         </div>
diff --git a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
index 8c4a0122..82be8595 100644
--- a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <demo-ctrl-player class="demo-ctrl-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/popover/html/css/BasicUsage.html b/site/src/components/docs/demos/popover/html/css/BasicUsage.html
index 5e23e4b1..199491a2 100644
--- a/site/src/components/docs/demos/popover/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/popover/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx b/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
index 9a8ffe51..eef3b351 100644
--- a/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <div className="bar">
           <Popover.Root>
             <Popover.Trigger className="trigger">Settings</Popover.Trigger>
diff --git a/site/src/components/docs/demos/poster/html/css/BasicUsage.html b/site/src/components/docs/demos/poster/html/css/BasicUsage.html
index 47bc3dbf..31273d02 100644
--- a/site/src/components/docs/demos/poster/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/poster/html/css/BasicUsage.html
@@ -2,13 +2,13 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             playsinline
         ></video>
 
         <media-poster class="media-poster">
             <img
-                src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
+                src="{{VJS10_DEMO_POSTER}}"
                 alt="Video thumbnail"
                 />
             </media-poster>
diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
index 8d253114..b942549a 100644
--- a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
@@ -7,12 +7,9 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsInline />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" playsInline />
 
-        <Poster
-          className="media-poster"
-          src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
-        />
+        <Poster className="media-poster" src="{{VJS10_DEMO_POSTER}}" />
 
         <PlayButton
           className="media-play-button"
diff --git a/site/src/components/docs/demos/quality-radio-group/html/css/BasicUsage.html b/site/src/components/docs/demos/quality-radio-group/html/css/BasicUsage.html
index 4b6e1e08..ed2eb036 100644
--- a/site/src/components/docs/demos/quality-radio-group/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/quality-radio-group/html/css/BasicUsage.html
@@ -2,7 +2,7 @@
     <media-container>
         <hlsjs-video
             class="video-media"
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8"
+            src="{{VJS8_DEMO_VIDEO_HLS}}"
             autoplay
             crossorigin="anonymous"
             muted
diff --git a/site/src/components/docs/demos/quality-radio-group/react/css/BasicUsage.tsx b/site/src/components/docs/demos/quality-radio-group/react/css/BasicUsage.tsx
index 7aab8550..262d3555 100644
--- a/site/src/components/docs/demos/quality-radio-group/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/quality-radio-group/react/css/BasicUsage.tsx
@@ -4,7 +4,7 @@ import { videoFeatures } from '@videojs/react/video';
 import type { ReactNode } from 'react';
 
 const Player = createPlayer({ features: videoFeatures });
-const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';
+const src = '{{VJS8_DEMO_VIDEO_HLS}}';
 
 function QualityMenu(): ReactNode {
   const quality = useQualityOptions();
diff --git a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
index c2a0c097..5c7cac2b 100644
--- a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
index 4cddd830..38f4187b 100644
--- a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
@@ -7,13 +7,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <div className="buttons">
           <SeekButton
             seconds={-5}
diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html b/site/src/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html
index b58026de..c880c3fe 100644
--- a/site/src/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html
@@ -1,5 +1,5 @@
 <simple-hls-audio-only
     class="simple-hls-audio-only"
-    src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+    src="{{VJS10_DEMO_VIDEO_HLS}}"
     controls
 ></simple-hls-audio-only>
diff --git a/site/src/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx
index 41908091..0218a190 100644
--- a/site/src/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx
@@ -1,11 +1,5 @@
 import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only';
 
 export default function BasicUsage() {
-  return (
-    <SimpleHlsAudioOnly
-      className="simple-hls-audio-only"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      controls
-    />
-  );
+  return <SimpleHlsAudioOnly className="simple-hls-audio-only" src="{{VJS10_DEMO_VIDEO_HLS}}" controls />;
 }
diff --git a/site/src/components/docs/demos/simple-hls-video/html/css/BasicUsage.html b/site/src/components/docs/demos/simple-hls-video/html/css/BasicUsage.html
index de35a8a1..84e4c25c 100644
--- a/site/src/components/docs/demos/simple-hls-video/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/simple-hls-video/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <media-container class="media-container">
     <simple-hls-video
-        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        src="{{VJS10_DEMO_VIDEO_HLS}}"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx
index d712acbc..e541a214 100644
--- a/site/src/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx
@@ -1,14 +1,5 @@
 import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
 
 export default function BasicUsage() {
-  return (
-    <SimpleHlsVideo
-      className="simple-hls-video"
-      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-      autoPlay
-      muted
-      playsInline
-      loop
-    />
-  );
+  return <SimpleHlsVideo className="simple-hls-video" src="{{VJS10_DEMO_VIDEO_HLS}}" autoPlay muted playsInline loop />;
 }
diff --git a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
index 82821eaf..34596e27 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
@@ -3,7 +3,7 @@
         <media-container>
             <video
                 class="media"
-                src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+                src="{{VJS10_DEMO_VIDEO_MP4}}"
                 preload="auto"
                 muted
                 playsinline
diff --git a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
index 6babbb86..51473446 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
@@ -9,7 +9,7 @@ export default function TextTrackUsage() {
       <Player.Container className="demo">
         <Video
           className="media"
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          src="{{VJS10_DEMO_VIDEO_MP4}}"
           preload="auto"
           muted
           playsInline
diff --git a/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
index 73711317..58afe02a 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
@@ -2,7 +2,7 @@ import { Thumbnail } from '@videojs/react';
 
 const THUMBNAILS = [
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
+    url: '{{VJS10_DEMO_STORYBOARD}}',
     startTime: 0,
     endTime: 10,
     width: 284,
@@ -10,7 +10,7 @@ const THUMBNAILS = [
     coords: { x: 0, y: 0 },
   },
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
+    url: '{{VJS10_DEMO_STORYBOARD}}',
     startTime: 10,
     endTime: 20,
     width: 284,
@@ -18,7 +18,7 @@ const THUMBNAILS = [
     coords: { x: 284, y: 0 },
   },
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
+    url: '{{VJS10_DEMO_STORYBOARD}}',
     startTime: 20,
     width: 284,
     height: 160,
diff --git a/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
index 206145db..c7680992 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
@@ -2,17 +2,17 @@ import { Thumbnail } from '@videojs/react';
 
 const THUMBNAILS = [
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=0',
+    url: '{{VJS10_DEMO_POSTER}}?time=0',
     startTime: 0,
     endTime: 10,
   },
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=10',
+    url: '{{VJS10_DEMO_POSTER}}?time=10',
     startTime: 10,
     endTime: 20,
   },
   {
-    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=20',
+    url: '{{VJS10_DEMO_POSTER}}?time=20',
     startTime: 20,
   },
 ];
diff --git a/site/src/components/docs/demos/time-slider/html/css/WithParts.html b/site/src/components/docs/demos/time-slider/html/css/WithParts.html
index af6a2df9..ef5c6caa 100644
--- a/site/src/components/docs/demos/time-slider/html/css/WithParts.html
+++ b/site/src/components/docs/demos/time-slider/html/css/WithParts.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx b/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
index 43771e45..71d469fc 100644
--- a/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
+++ b/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
@@ -7,13 +7,7 @@ export default function WithParts() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <TimeSlider.Root className="media-time-slider">
           <TimeSlider.Track className="media-slider-track">
             <TimeSlider.Buffer className="media-slider-buffer" />
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.html b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
index 97e1ba73..d82d8977 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.html b/site/src/components/docs/demos/time/html/css/CurrentTime.html
index b0c7f025..452bf6d5 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
index d1931121..80802f14 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.html b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
index 2d3b8166..c83211df 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.html
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.html b/site/src/components/docs/demos/time/html/css/Remaining.html
index 92db9977..c703a1dc 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.html
+++ b/site/src/components/docs/demos/time/html/css/Remaining.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
index d01f94c1..6141afc4 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
@@ -7,13 +7,7 @@ export default function CurrentDuration() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Time.Group className="time-group">
           <Time.Value type="current" />
           <Time.Separator />
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
index 7b1bfe78..868abeca 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
@@ -7,13 +7,7 @@ export default function CurrentTime() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Time.Value type="current" className="media-time" />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
index cb30e213..66dcfbd0 100644
--- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
@@ -7,13 +7,7 @@ export default function CustomNegativeSign() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Time.Value type="remaining" negativeSign="~" className="media-time" />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
index adcfee78..6b88c4c5 100644
--- a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
@@ -7,13 +7,7 @@ export default function CustomSeparator() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Time.Group className="time-group">
           <Time.Value type="current" />
           <Time.Separator> of </Time.Separator>
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.tsx b/site/src/components/docs/demos/time/react/css/Remaining.tsx
index 399cf17e..d532810c 100644
--- a/site/src/components/docs/demos/time/react/css/Remaining.tsx
+++ b/site/src/components/docs/demos/time/react/css/Remaining.tsx
@@ -7,13 +7,7 @@ export default function Remaining() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Time.Value type="remaining" className="media-time" />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
index d4522ea3..9c2b605e 100644
--- a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
@@ -38,13 +38,7 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <MediaInfo />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/use-player/react/css/Selector.tsx b/site/src/components/docs/demos/use-player/react/css/Selector.tsx
index ffc7d95f..39cc2cec 100644
--- a/site/src/components/docs/demos/use-player/react/css/Selector.tsx
+++ b/site/src/components/docs/demos/use-player/react/css/Selector.tsx
@@ -32,13 +32,7 @@ export default function Selector() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <StateDisplay />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
index 3599e828..26c2d120 100644
--- a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
+++ b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
@@ -24,13 +24,7 @@ export default function StoreAccess() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <Controls />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/use-store/react/css/Selector.tsx b/site/src/components/docs/demos/use-store/react/css/Selector.tsx
index 45d696dc..187fd643 100644
--- a/site/src/components/docs/demos/use-store/react/css/Selector.tsx
+++ b/site/src/components/docs/demos/use-store/react/css/Selector.tsx
@@ -30,13 +30,7 @@ export default function Selector() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <DerivedState />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
index f2335c7b..8339783a 100644
--- a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
+++ b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
@@ -25,13 +25,7 @@ export default function StoreAccess() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <SeekControls />
       </Player.Container>
     </Player.Provider>
diff --git a/site/src/components/docs/demos/volume-slider/html/css/WithParts.html b/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
index 2ec2f68b..4791c6fd 100644
--- a/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
+++ b/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
@@ -1,7 +1,7 @@
 <video-player class="video-player">
     <media-container>
         <video
-            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            src="{{VJS10_DEMO_VIDEO_MP4}}"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx b/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
index a9ca5c25..23fc9010 100644
--- a/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
+++ b/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
@@ -7,13 +7,7 @@ export default function WithParts() {
   return (
     <Player.Provider>
       <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+        <Video src="{{VJS10_DEMO_VIDEO_MP4}}" autoPlay muted playsInline loop />
         <MuteButton
           className="media-mute-button"
           render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
diff --git a/site/src/consts.ts b/site/src/consts.ts
index 54787fd3..bbb5ac3a 100644
--- a/site/src/consts.ts
+++ b/site/src/consts.ts
@@ -20,13 +20,13 @@ export function isPrereleaseSite(siteUrl: URL | undefined): boolean {
   return siteUrl?.origin === PRERELEASE_URL.origin;
 }
 
-/**
- * Video source for demos and examples throughout the site,
- * wherever JS is used. HTML examples use a separate hardcoded source.
- */
-interface VideoSource {
+/** A streaming video source used by demos and examples throughout the site. */
+interface StreamingVideoSource {
   id: string;
   hls: string;
+}
+
+interface VideoSource extends StreamingVideoSource {
   mp4: string;
   poster: string;
 }
@@ -45,6 +45,16 @@ export const VJS10_DEMO_VIDEO: VideoSource = {
   poster: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp',
 };
 
+export const VJS10_MULTI_AUDIO_DEMO_VIDEO: StreamingVideoSource = {
+  id: 's41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ',
+  hls: 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8',
+};
+
+export const VJS10_DEMO_BACKGROUND_VIDEO_MP4 =
+  'https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4';
+export const VJS10_DEMO_POSTER = `https://image.mux.com/${VJS10_DEMO_VIDEO.id}/thumbnail.jpg`;
+export const VJS10_DEMO_STORYBOARD = `https://image.mux.com/${VJS10_DEMO_VIDEO.id}/storyboard.jpg`;
+
 // Standalone third-party samples for source types that aren't the shared Mux
 // asset above: Mux doesn't serve DASH, and Vimeo is a hosting service. The DASH
 // value matches the sample used by the site's DASH reference demo.
diff --git a/site/src/content/docs/reference/write-references.mdx b/site/src/content/docs/reference/write-references.mdx
index 6c71aec7..2b49ed0a 100644
--- a/site/src/content/docs/reference/write-references.mdx
+++ b/site/src/content/docs/reference/write-references.mdx
@@ -98,9 +98,22 @@ React and HTML demos for the same variant should use matching BEM structures.
 
 ### Video and poster sources
 
-Demos default to these URLs:
+Demo media sources live in `site/src/consts.ts`. HTML and React demo files use placeholders from `site/scripts/replace-demo-placeholders.ts`; the site resolves them for both the live demo and its source tab, so displayed source remains copy-paste ready.
 
-These demo assets are hosted by [Mux](https://www.mux.com?utm_source=videojs&utm_campaign=vjs10):
+Use the matching placeholder instead of hardcoding a media URL in a demo:
+
+| Purpose | Demo placeholder |
+| --- | --- |
+| Default MP4 | `{{VJS10_DEMO_VIDEO_MP4}}` |
+| Default HLS | `{{VJS10_DEMO_VIDEO_HLS}}` |
+| Default poster | `{{VJS10_DEMO_POSTER}}` |
+| Default storyboard | `{{VJS10_DEMO_STORYBOARD}}` |
+| Background video | `{{VJS10_DEMO_BACKGROUND_VIDEO_MP4}}` |
+| DASH | `{{VJS10_DEMO_DASH}}` |
+| Quality renditions | `{{VJS8_DEMO_VIDEO_HLS}}` |
+| Multi-language audio and renditions | `{{VJS10_MULTI_AUDIO_DEMO_VIDEO_HLS}}` |
+
+The default demo assets are hosted by [Mux](https://www.mux.com?utm_source=videojs&utm_campaign=vjs10):
 
 ```
 Video: https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4
diff --git a/site/vitest.config.ts b/site/vitest.config.ts
index 79654293..43c56e10 100644
--- a/site/vitest.config.ts
+++ b/site/vitest.config.ts
@@ -2,13 +2,14 @@
 import react from '@vitejs/plugin-react';
 import { getViteConfig } from 'astro/config';
 import type { ViteUserConfig } from 'vitest/config';
+import { demoPlaceholderPlugin } from './scripts/replace-demo-placeholders.ts';
 
 // Typed as vitest's `ViteUserConfig` (Vite's config augmented with `test`) and
 // passed as a variable: Astro 7's `getViteConfig` param no longer surfaces the
 // vitest module augmentation, so a fresh object literal trips an excess-property
 // check on `test`. A variable is only checked for structural assignability.
 const config: ViteUserConfig = {
-  plugins: [react()],
+  plugins: [demoPlaceholderPlugin(), react()],
   test: {
     globals: true,
     environment: 'jsdom',