fix(html): include base and shared styles in ejected skin CSS

[mihar-22]

Include base.css and shared.css in the 4 HTML skin CSS entry points so the ejected player CSS contains the foundational styles that are normally applied programmatically by SkinElement

Context

The ejected HTML copies from the homepage/docs produce a broken player because the CSS is missing critical rules:

• base.css — video-player { display: contents } and video-player video { width/height: 100% } (normally injected into document.head by SkinElement via ensureGlobalStyle())
• shared.css — media-tooltip-group { display: contents } and volume popover hiding (normally applied to shadow DOM via adoptedStyleSheets)

In the ejected flow there is no <video-skin> element, so SkinElement is never instantiated and these styles are never applied. This caused poster bleed, broken slider/time sizing, and video not filling its container.

The fix adds @import "../base.css" and @import "../shared.css" to each skin CSS entry point. The ejected build's resolveImports() already handles relative imports, so no build script changes were needed.

Closes #1186

---

Note

Low Risk
Low risk CSS-only change that alters which global/shared rules are included in the four skin entrypoints; main concern is potential minor styling differences for consumers relying on previous missing defaults.

Overview
Ensures the ejected HTML player skins include foundational CSS by importing base.css and shared.css into the four skin entrypoints (audio/video, default/minimal).

This makes builds that resolve CSS imports ship the same base/shared rules that were previously applied programmatically, preventing missing-layout styling when using the standalone skin CSS.

^{Written by Cursor Bugbot for commit c7332c4. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Apr 2, 2026 4:07am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	c7332c4
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69cdeb7e342f960008a4c6b8
😎 Deploy Preview	https://deploy-preview-1196--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html — no changes

Presets (7)

Entry	Size
/video (default)	24.92 kB
/video (default + hls)	156.48 kB
/video (minimal)	24.78 kB
/video (minimal + hls)	156.30 kB
/audio (default)	22.86 kB
/audio (minimal)	22.93 kB
/background	6.86 kB

Media (7)

Entry	Size
/media/background-video	1.04 kB
/media/container	1.59 kB
/media/dash-video	236.49 kB
/media/hls-video	133.17 kB
/media/mux-video	155.85 kB
/media/native-hls-video	3.03 kB
/media/simple-hls-video	14.98 kB

Players (3)

Entry	Size
/video/player	6.57 kB
/audio/player	6.56 kB
/background/player	6.56 kB

Skins (17)

Entry	Type	Size
/video/minimal-skin.css	css	3.50 kB
/video/skin.css	css	3.52 kB
/video/minimal-skin	js	23.97 kB
/video/minimal-skin.tailwind	js	24.44 kB
/video/skin	js	24.04 kB
/video/skin.tailwind	js	24.50 kB
/audio/minimal-skin.css	css	2.51 kB
/audio/skin.css	css	2.49 kB
/audio/minimal-skin	js	22.19 kB
/audio/minimal-skin.tailwind	js	22.48 kB
/audio/skin	js	22.07 kB
/audio/skin.tailwind	js	22.49 kB
/background/skin.css	css	117 B
/background/skin	js	1.15 kB
/base.css	css	157 B
/shared.css	css	86 B
/skin-element	js	1.34 kB

UI Components (22)

Entry	Size
/ui/alert-dialog	1.89 kB
/ui/alert-dialog-close	1.68 kB
/ui/alert-dialog-description	1.65 kB
/ui/alert-dialog-title	1.65 kB
/ui/buffering-indicator	1.65 kB
/ui/captions-button	1.89 kB
/ui/controls	1.71 kB
/ui/error-dialog	2.10 kB
/ui/fullscreen-button	1.90 kB
/ui/mute-button	1.87 kB
/ui/pip-button	1.91 kB
/ui/play-button	1.86 kB
/ui/playback-rate-button	1.71 kB
/ui/popover	2.25 kB
/ui/poster	1.57 kB
/ui/seek-button	1.92 kB
/ui/slider	2.11 kB
/ui/thumbnail	2.00 kB
/ui/time	1.72 kB
/ui/time-slider	2.16 kB
/ui/tooltip	2.18 kB
/ui/volume-slider	2.33 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	19.51 kB
/video (default + hls)	151.39 kB
/video (minimal)	19.56 kB
/video (minimal + hls)	151.48 kB
/audio (default)	16.27 kB
/audio (minimal)	16.36 kB
/background	3.13 kB

Media (6)

Entry	Size
/media/background-video	476 B
/media/dash-video	236.45 kB
/media/hls-video	133.36 kB
/media/mux-video	155.88 kB
/media/native-hls-video	2.96 kB
/media/simple-hls-video	14.98 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.43 kB
/video/skin.css	css	3.45 kB
/video/minimal-skin	js	19.47 kB
/video/minimal-skin.tailwind	js	22.95 kB
/video/skin	js	19.44 kB
/video/skin.tailwind	js	23.04 kB
/audio/minimal-skin.css	css	2.41 kB
/audio/skin.css	css	2.37 kB
/audio/minimal-skin	js	16.29 kB
/audio/minimal-skin.tailwind	js	18.77 kB
/audio/skin	js	16.20 kB
/audio/skin.tailwind	js	18.75 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (19)

Entry	Size
/ui/alert-dialog	2.27 kB
/ui/buffering-indicator	1.91 kB
/ui/captions-button	1.92 kB
/ui/controls	1.87 kB
/ui/error-dialog	2.28 kB
/ui/fullscreen-button	2.32 kB
/ui/mute-button	2.34 kB
/ui/pip-button	2.32 kB
/ui/play-button	2.32 kB
/ui/playback-rate-button	1.90 kB
/ui/popover	2.90 kB
/ui/poster	1.76 kB
/ui/seek-button	2.34 kB
/ui/slider	3.08 kB
/ui/thumbnail	2.10 kB
/ui/time	1.89 kB
/ui/time-slider	2.75 kB
/ui/tooltip	2.91 kB
/ui/volume-slider	2.80 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (8)

Entry	Size
.	5.15 kB
/dom	8.84 kB
/dom/media/custom-media-element	1.81 kB
/dom/media/dash	235.77 kB
/dom/media/hls	132.64 kB
/dom/media/mux	155.33 kB
/dom/media/native-hls	2.38 kB
/dom/media/simple-hls	14.39 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.53 kB
/events	319 B
/function	261 B
/object	247 B
/predicate	265 B
/string	148 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (3)

Entry	Size
.	40 B
/dom	12.45 kB
/playback-engine	12.41 kB

---

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.