fix(skin): hide volume popover when volume control is unsupported

[mihar-22]

Summary

• HTML skins: CSS :has() rule in shared.css hides the volume popover when data-availability="unsupported" on the volume slider. Injected into all skin shadow roots via SkinMixin.
• React skins: VolumePopover component conditionally renders only the mute button (no popover) when volume is unsupported.

Limitations

CSS-only fix for HTML skins — the popover's commandfor linkage still sets aria-haspopup on the trigger pointing to a hidden element. Proper fix requires popover-level disabled state (#1021).

Closes #961

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 19, 2026 7:59am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	5f713c7
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69bbacee68a17d0008814910
😎 Deploy Preview	https://deploy-preview-1025--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)	23.20 kB
/video (default + hls)	153.75 kB
/video (minimal)	23.03 kB
/video (minimal + hls)	153.48 kB
/audio (default)	21.45 kB
/audio (minimal)	21.43 kB
/background	6.38 kB

Media (5)

Entry	Size
/media/background-video	1.03 kB
/media/container	1.59 kB
/media/dash-video	236.04 kB
/media/hls-video	131.57 kB
/media/simple-hls-video	12.33 kB

Players (3)

Entry	Size
/video/player	6.24 kB
/audio/player	6.23 kB
/background/player	6.23 kB

Skins (16)

Entry	Type	Size
/video/minimal-skin.css	css	3.12 kB
/video/skin.css	css	3.15 kB
/video/minimal-skin	js	22.25 kB
/video/minimal-skin.tailwind	js	22.50 kB
/video/skin	js	22.39 kB
/video/skin.tailwind	js	22.72 kB
/audio/minimal-skin.css	css	2.28 kB
/audio/skin.css	css	2.30 kB
/audio/minimal-skin	js	20.63 kB
/audio/minimal-skin.tailwind	js	20.68 kB
/audio/skin	js	20.68 kB
/audio/skin.tailwind	js	20.89 kB
/background/skin.css	css	117 B
/background/skin	js	1003 B
/base.css	css	157 B
/shared.css	css	86 B

UI Components (21)

Entry	Size
/ui/alert-dialog	2.08 kB
/ui/alert-dialog-close	1.58 kB
/ui/alert-dialog-description	1.50 kB
/ui/alert-dialog-title	1.51 kB
/ui/buffering-indicator	1.78 kB
/ui/captions-button	1.78 kB
/ui/controls	1.65 kB
/ui/fullscreen-button	1.78 kB
/ui/mute-button	1.80 kB
/ui/pip-button	1.80 kB
/ui/play-button	1.80 kB
/ui/playback-rate-button	1.84 kB
/ui/popover	3.24 kB
/ui/poster	1.70 kB
/ui/seek-button	1.80 kB
/ui/slider	1.98 kB
/ui/thumbnail	2.14 kB
/ui/time	1.62 kB
/ui/time-slider	2.11 kB
/ui/tooltip	2.41 kB
/ui/volume-slider	2.19 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes

Presets (7)

Entry	Size
/video (default)	18.99 kB
/video (default + hls)	149.77 kB
/video (minimal)	19.03 kB
/video (minimal + hls)	149.71 kB
/audio (default)	14.93 kB
/audio (minimal)	15.00 kB
/background	3.13 kB

Media (4)

Entry	Size
/media/background-video	476 B
/media/dash-video	236.19 kB
/media/hls-video	131.59 kB
/media/simple-hls-video	12.34 kB

Skins (14)

Entry	Type	Size
/video/minimal-skin.css	css	3.12 kB
/video/skin.css	css	3.15 kB
/video/minimal-skin	js	18.92 kB
/video/minimal-skin.tailwind	js	22.14 kB
/video/skin	js	18.92 kB
/video/skin.tailwind	js	22.14 kB
/audio/minimal-skin.css	css	2.28 kB
/audio/skin.css	css	2.30 kB
/audio/minimal-skin	js	14.94 kB
/audio/minimal-skin.tailwind	js	17.02 kB
/audio/skin	js	14.88 kB
/audio/skin.tailwind	js	17.25 kB
/background/skin.css	css	90 B
/background/skin	js	272 B

UI Components (18)

Entry	Size
/ui/alert-dialog	2.23 kB
/ui/buffering-indicator	2.22 kB
/ui/captions-button	2.27 kB
/ui/controls	2.23 kB
/ui/fullscreen-button	2.23 kB
/ui/mute-button	2.28 kB
/ui/pip-button	2.23 kB
/ui/play-button	2.25 kB
/ui/playback-rate-button	2.26 kB
/ui/popover	2.85 kB
/ui/poster	2.07 kB
/ui/seek-button	2.26 kB
/ui/slider	3.16 kB
/ui/thumbnail	2.06 kB
/ui/time	1.93 kB
/ui/time-slider	2.67 kB
/ui/tooltip	2.71 kB
/ui/volume-slider	2.70 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (6)

Entry	Size
.	4.80 kB
/dom	8.41 kB
/dom/media/custom-media-element	1.81 kB
/dom/media/dash	235.62 kB
/dom/media/hls	131.27 kB
/dom/media/simple-hls	11.85 kB

🏷️ @videojs/element — no changes

Entries (2)

Entry	Size
.	999 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Size
.	1.32 kB
/html	700 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Size
/array	104 B
/dom	1.25 kB
/events	227 B
/function	261 B
/object	119 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	10.04 kB
/playback-engine	9.94 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.

[Copilot]

Pull request overview

This PR hides the volume popover UI when programmatic volume control is reported as unsupported (notably on iOS Safari), preventing users from seeing/interacting with a non-functional volume slider.

Changes:

• HTML/CSS skins: add :has()-based CSS rules to hide .media-popover--volume when its media-volume-slider reports data-availability="unsupported".
• React skins: introduce a VolumePopover helper that renders only the mute button (no popover/slider) when volumeAvailability === 'unsupported'.
• Apply the CSS rule globally for HTML skin shadow roots via packages/html/src/define/shared.css.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/skins/src/minimal/css/components/popup.css	Hides minimal skin volume popover via :has() when volume slider is unsupported.
packages/skins/src/default/css/components/popup.css	Hides default skin volume popover via nested :has() selector when unsupported.
packages/react/src/presets/video/skin.tsx	Adds VolumePopover to omit popover/slider when volume is unsupported.
packages/react/src/presets/video/skin.tailwind.tsx	Tailwind video skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/video/minimal-skin.tsx	Minimal video skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/video/minimal-skin.tailwind.tsx	Tailwind minimal video skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/audio/skin.tsx	Audio skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/audio/skin.tailwind.tsx	Tailwind audio skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/audio/minimal-skin.tsx	Minimal audio skin equivalent VolumePopover conditional rendering.
packages/react/src/presets/audio/minimal-skin.tailwind.tsx	Tailwind minimal audio skin equivalent VolumePopover conditional rendering.
packages/html/src/define/shared.css	Adds shared CSS rule to hide the volume popover in HTML skins when unsupported.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.