From f17570156e593a2d443e5c878cde780f34d0ff8b Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Thu, 30 Oct 2025 00:56:07 -0500
Subject: [PATCH] fix: connect html eject skins to media-provider

---
 examples/html-eject-frosted/index.html           | 1 +
 examples/html-eject-frosted/src/main.ts          | 3 ++-
 examples/html-eject-minimal/index.html           | 1 +
 examples/html-eject-minimal/src/main.ts          | 3 ++-
 site/src/content/docs/how-to/customize-skins.mdx | 4 ----
 site/src/utils/ejectCodeGenerator.ts             | 5 ++++-
 6 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/examples/html-eject-frosted/index.html b/examples/html-eject-frosted/index.html
index 58968598..72d8b6fa 100644
--- a/examples/html-eject-frosted/index.html
+++ b/examples/html-eject-frosted/index.html
@@ -42,6 +42,7 @@
           "
         >
           <video
+            slot="media"
             src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
             playsinline
             poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
diff --git a/examples/html-eject-frosted/src/main.ts b/examples/html-eject-frosted/src/main.ts
index c9bf17ae..23a78a28 100644
--- a/examples/html-eject-frosted/src/main.ts
+++ b/examples/html-eject-frosted/src/main.ts
@@ -1,7 +1,8 @@
 import './frosted.css';
 import '@videojs/html/icons';
-import '@videojs/html/define/media-container';
+// be sure to import media-provider first
 import '@videojs/html/define/media-provider';
+import '@videojs/html/define/media-container';
 import '@videojs/html/define/media-play-button';
 import '@videojs/html/define/media-mute-button';
 import '@videojs/html/define/media-volume-slider';
diff --git a/examples/html-eject-minimal/index.html b/examples/html-eject-minimal/index.html
index c004adea..219de32e 100644
--- a/examples/html-eject-minimal/index.html
+++ b/examples/html-eject-minimal/index.html
@@ -42,6 +42,7 @@
           "
         >
           <video
+            slot="media"
             src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
             playsinline
             poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
diff --git a/examples/html-eject-minimal/src/main.ts b/examples/html-eject-minimal/src/main.ts
index f1790dc9..502e7074 100644
--- a/examples/html-eject-minimal/src/main.ts
+++ b/examples/html-eject-minimal/src/main.ts
@@ -1,7 +1,8 @@
 import './minimal.css';
 import '@videojs/html/icons';
-import '@videojs/html/define/media-container';
+// be sure to import media-provider first
 import '@videojs/html/define/media-provider';
+import '@videojs/html/define/media-container';
 import '@videojs/html/define/media-play-button';
 import '@videojs/html/define/media-mute-button';
 import '@videojs/html/define/media-volume-slider';
diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx
index ed0066c6..d39b796f 100644
--- a/site/src/content/docs/how-to/customize-skins.mdx
+++ b/site/src/content/docs/how-to/customize-skins.mdx
@@ -19,10 +19,6 @@ Video.js v10 comes with pre-built skins like Frosted and Minimal, but you can fu
 
 While eventually we'll have a CLI that'll eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations.
 
-<FrameworkCase frameworks={["html"]}>
-> ⚠️ **Notice:** The HTML examples below aren't quite working, yet. Stay tuned for updates.
-</FrameworkCase>
-
 ## Frosted Skin
 
 <FrameworkCase frameworks={["react"]} withHydrationWorkaround>
diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts
index cc5ab429..c3d3d873 100644
--- a/site/src/utils/ejectCodeGenerator.ts
+++ b/site/src/utils/ejectCodeGenerator.ts
@@ -974,6 +974,7 @@ export function generateHTMLMarkup(skin: Skin): string {
     return `<media-provider>
   <media-container>
     <video
+      slot="media"
       src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
       playsinline
       poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
@@ -1072,6 +1073,7 @@ export function generateHTMLMarkup(skin: Skin): string {
     return `<media-provider>
   <media-container>
     <video
+      slot="media"
       src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
       playsinline
       poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
@@ -1904,8 +1906,9 @@ media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {
 export function generateHTMLJS(skin: Skin): string {
   return `import './${skin}.css';
 import '@videojs/html/icons';
-import '@videojs/html/define/media-container';
+// be sure to import media-provider first
 import '@videojs/html/define/media-provider';
+import '@videojs/html/define/media-container';
 import '@videojs/html/define/media-play-button';
 import '@videojs/html/define/media-mute-button';
 import '@videojs/html/define/media-volume-slider';