From 0bc84d2cf1485db20bf7e55015b06422daa0e451 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Tue, 10 Mar 2026 13:55:20 -0500
Subject: [PATCH] fix(site): add missing slot="media" to HTML demo video
 elements (#867)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../docs/demos/buffering-indicator/html/css/BasicUsage.html     | 1 +
 .../docs/demos/captions-button/html/css/BasicUsage.html         | 1 +
 .../src/components/docs/demos/controls/html/css/BasicUsage.html | 1 +
 .../docs/demos/fullscreen-button/html/css/BasicUsage.html       | 1 +
 .../docs/demos/html-create-player/html/css/BasicUsage.html      | 1 +
 .../components/docs/demos/mute-button/html/css/BasicUsage.html  | 1 +
 .../docs/demos/mute-button/html/css/VolumeLevels.html           | 1 +
 .../components/docs/demos/pip-button/html/css/BasicUsage.html   | 1 +
 .../components/docs/demos/play-button/html/css/BasicUsage.html  | 1 +
 .../docs/demos/playback-rate-button/html/css/BasicUsage.html    | 1 +
 .../docs/demos/player-controller/html/css/BasicUsage.html       | 1 +
 site/src/components/docs/demos/popover/html/css/BasicUsage.html | 1 +
 site/src/components/docs/demos/poster/html/css/BasicUsage.html  | 1 +
 .../components/docs/demos/seek-button/html/css/BasicUsage.html  | 1 +
 .../components/docs/demos/thumbnail/html/css/BasicUsage.html    | 1 +
 .../components/docs/demos/time-slider/html/css/WithParts.html   | 1 +
 .../components/docs/demos/time/html/css/CurrentDuration.html    | 1 +
 site/src/components/docs/demos/time/html/css/CurrentTime.html   | 1 +
 .../components/docs/demos/time/html/css/CustomNegativeSign.html | 1 +
 .../components/docs/demos/time/html/css/CustomSeparator.html    | 1 +
 site/src/components/docs/demos/time/html/css/Remaining.html     | 1 +
 .../components/docs/demos/volume-slider/html/css/WithParts.html | 1 +
 site/src/components/home/Demo/Base.tsx                          | 2 +-
 23 files changed, 23 insertions(+), 1 deletion(-)

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 b5e594ef..0700ffd6 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,6 +1,7 @@
 <video-player class="html-buffering-indicator-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 855afa10..840eef05 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,6 +1,7 @@
 <video-player class="html-captions-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 11542785..0da1820b 100644
--- a/site/src/components/docs/demos/controls/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/controls/html/css/BasicUsage.html
@@ -1,6 +1,7 @@
 <video-player class="html-controls-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 e68b2d32..cd640914 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,6 +1,7 @@
 <video-player class="html-fullscreen-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 fd291214..224b17b0 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,6 +1,7 @@
 <demo-video-player class="html-create-player-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 12f61c55..07ea0b21 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,6 +1,7 @@
 <video-player class="html-mute-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 88ccace0..99913978 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,6 +1,7 @@
 <video-player class="html-mute-button-volume-levels">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 3589d0dc..1b465851 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,6 +1,7 @@
 <video-player class="html-pip-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 b5ff5243..e7e930ce 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,6 +1,7 @@
 <video-player class="html-play-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 fa51f03c..bd9dad7e 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,5 +1,6 @@
 <video-player class="html-playback-rate-button-basic">
     <video
+        slot="media"
         src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
         autoplay
         muted
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 e45a277d..877cd593 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,6 +1,7 @@
 <demo-ctrl-player class="html-player-controller-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 7cbc671d..af258c8a 100644
--- a/site/src/components/docs/demos/popover/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/popover/html/css/BasicUsage.html
@@ -1,6 +1,7 @@
 <video-player class="html-popover-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 b75e1594..b26a8f2a 100644
--- a/site/src/components/docs/demos/poster/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/poster/html/css/BasicUsage.html
@@ -2,6 +2,7 @@
 <video-player class="html-poster-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             playsinline
         ></video>
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 65fe1993..76f5bb7a 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,6 +1,7 @@
 <video-player class="html-seek-button-basic">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 0de7658a..c18bcd0a 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
@@ -2,6 +2,7 @@
     <video-player>
         <media-container>
             <video
+                slot="media"
                 class="html-thumbnail-text-track__media"
                 src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
                 preload="auto"
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 05ca05ac..0fdec71e 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,6 +1,7 @@
 <video-player class="html-time-slider-parts">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 87568008..9d34b3d9 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
@@ -1,6 +1,7 @@
 <video-player class="html-time-current-duration">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 1683d666..6e18d5ef 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.html
@@ -1,6 +1,7 @@
 <video-player class="html-time-current-time">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 c977b3c8..7f62b5a3 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
@@ -1,6 +1,7 @@
 <video-player class="html-time-custom-negative-sign">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 3530b56a..e02b02c8 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.html
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
@@ -1,6 +1,7 @@
 <video-player class="html-time-custom-separator">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 436602ca..d009ca62 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.html
+++ b/site/src/components/docs/demos/time/html/css/Remaining.html
@@ -1,6 +1,7 @@
 <video-player class="html-time-remaining">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
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 451d8a04..6f2f8de5 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,6 +1,7 @@
 <video-player class="html-volume-slider-parts">
     <media-container>
         <video
+            slot="media"
             src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
diff --git a/site/src/components/home/Demo/Base.tsx b/site/src/components/home/Demo/Base.tsx
index 842dbe9b..6556f920 100644
--- a/site/src/components/home/Demo/Base.tsx
+++ b/site/src/components/home/Demo/Base.tsx
@@ -16,7 +16,7 @@ function generateHTMLCode(skin: Skin): string {
 
 <video-player>
   <${skinTag}>
-    <video src="${VJS10_DEMO_VIDEO.mp4}"></video>
+    <video slot="media" src="${VJS10_DEMO_VIDEO.mp4}"></video>
   </${skinTag}>
 </video-player>`;
 }