@videojs/html 10.0.0-rc.2 → 10.0.0-rc.4

package/docs/{concepts/overview.md → guides/architecture.md}

@@ -1,4 +1,4 @@
-# Overview
+# Architecture
 
 How Video.js players are structured — state, UI, media, and extensions
 
@@ -10,9 +10,7 @@ For the reasoning behind this design, see [Why Video.js?](./why-videojs.md).
 
 State is handled by a `video-player` element, which creates a central state store that all components can access. Child components can automatically connect to the state of the `video-player` element.
 
-html
-
-```
+```html
 <!-- All components inside automatically connect to state -->
 <video-player>
   <video-skin>
@@ -21,7 +19,7 @@ html
 </video-player>
 ```
 
-You can access state and actions from anywhere within `<video-player>` with [`PlayerController`](../reference/player-controller.md).
+You can access state and actions from anywhere within `<video-player>` with [`PlayerController`](../reference/api/player-controller.md).
 
 - [Learn more about state and actions](./features.md)
 
@@ -33,9 +31,7 @@ Use a prebuilt **skin** or build your own from the individual **UI components**.
 
 Skins are complete, pre-designed player UIs that package components and styles together. They give you a polished starting point, with a small set of CSS custom properties for common visual changes. They don’t try to cover every player with options.
 
-html
-
-```
+```html
 <video-player>
   <video-skin>
     <video src="video.mp4"></video>
@@ -49,9 +45,7 @@ html
 
 If you want more control than a packaged skin offers, build your own UI from our components. Add, remove, and rearrange them to build the player you need.
 
-html
-
-```
+```html
 <video-player>
   <media-container>
     <video src="video.mp4"></video>
@@ -65,10 +59,10 @@ html
 </video-player>
 ```
 
-The easiest way to get started is to [eject the closest skin](../how-to/customize-skins.md#eject-and-edit-a-skin) and use its styled components as a foundation.
+Skin source is a practical foundation for custom UI because it provides the same styled components as the packaged version. See [Customize skins](./customize-skins.md#style-skin-source) to add it to your project.
 
 - [Learn more about UI components](./ui-components.md)
-- [Build your own component](../how-to/build-your-own-component.md)
+- [Build your own component](./build-your-own-component.md)
 
 ## Media
 
@@ -78,9 +72,7 @@ Media components can be format specific (HLS, DASH), service specific (YouTube,
 
 Media elements are discovered automatically. Plain `<video>` and `<audio>` elements are found via a `querySelector`. Custom media elements like `<hlsjs-video>` register themselves after you import their registration entry point.
 
-html
-
-```
+```html
 <video-player>
   <video-skin>
     <hlsjs-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hlsjs-video>
@@ -94,9 +86,7 @@ html
 
 Extensions add behavior to a player without rendering UI or playing media themselves.
 
-html
-
-```
+```html
 <video-player>
   <video-skin>
     <mux-video src="https://stream.mux.com/PLAYBACK_ID.m3u8"></mux-video>
@@ -106,7 +96,7 @@ html
 </video-player>
 ```
 
-An extension can provide behavior that a UI component controls: GoogleCast supplies the configurable Cast route, and [CastButton](../reference/cast-button.md) renders the control that starts and ends a session.
+An extension can provide behavior that a UI component controls: `<google-cast>` supplies the configurable Cast route, and [`<media-cast-button>`](../reference/components/cast-button.md) renders the control that starts and ends a session.
 
 ## Presets
 
@@ -118,4 +108,13 @@ Beyond the defaults, presets target more specific use cases. The `/background` p
 
 You can use it from the `@videojs/html/background/*` registration entry points.
 
-- [Learn more about presets](./presets.md)
+- [Learn more about presets](./presets.md)
+
+## Related pages
+
+### Guides
+
+- [Installation](./installation.md): Install Video.js packages and build an accessible, customizable video player with composable controls
+- [Features](./features.md): The state and actions each feature adds to the player
+- [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
+- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.

package/docs/{how-to → guides}/autoplay.md

@@ -2,23 +2,15 @@
 
 Start playback automatically and handle browser autoplay restrictions.
 
-Start playback automatically when the media is ready.
-
 For the best chance of autoplay succeeding, start playback muted and enable inline playback. Autoplay is a request, not a guarantee: browsers can block it based on audio state, prior interaction with your site, browser settings, and platform policy.
 
 ## Recommended approach
 
 Set autoplay, muted, and inline playback on the media element, and keep a manual play control available for when autoplay is blocked.
 
-Play Pause Replay
-
-index.html
-
-index.css
+**index.html**
 
-index.ts
-
-```
+```html
 <video-player class="video-player">
   <media-container>
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline></video>
@@ -30,7 +22,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .video-player {
   position: relative;
 }
@@ -79,8 +74,12 @@ index.ts
   display: none;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
+import '@videojs/html/ui/container';
 import '@videojs/html/ui/play-button';
 ```
 
@@ -88,43 +87,39 @@ import '@videojs/html/ui/play-button';
 
 The `autoplay`, `muted`, and `playsinline` attributes on `<video>` and similar media components pass through to the underlying media element. When the media element supports them, they’re applied, and playback is requested as soon as the media has enough data.
 
-The [playback feature](../reference/feature-playback.md) reflects the result in player state. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
+The [playback feature](../reference/api/feature-playback.md) reflects the result in player state. When autoplay succeeds, `paused` becomes `false` and `started` becomes `true`. When the browser blocks autoplay, the player stays `paused: true` with `started: false`, and the [Play button](../reference/components/play-button.md) renders its play state. There is no separate autoplay failure event: a blocked autoplay looks like media that never started.
 
 Calling `play()` from player state returns the native promise from the media element. When the browser blocks playback, that promise rejects with a `NotAllowedError`.
 
 ## Availability and constraints
 
-*   Autoplay can fail. Browsers decide per page load based on audio state, whether the user has interacted with your site before, browser settings, and platform policy.
-*   Muted autoplay is broadly allowed. Unmuted autoplay is blocked on first visit in most browsers; do not rely on it.
-*   Without inline playback, iPhone Safari opens the video in fullscreen when playback starts.
-*   Low-power mode and data-saver settings can block even muted autoplay. This is why the recommended approach keeps a manual play control.
-*   Programmatic volume control is unsupported on some platforms. The [volume feature](../reference/feature-volume.md) exposes this as `volumeAvailability: 'available' | 'unavailable' | 'unsupported'`; iOS Safari reports `'unsupported'`, and `'unavailable'` means the feature hasn’t attached to a media element yet.
-*   This guide applies to media components that render a video element (Video, HlsJsVideo, DashVideo, MuxVideo, and the like). Embed components (YouTube, Vimeo, TikTok, Twitch) forward autoplay to the third-party player, which applies its own autoplay rules; muted and inline behavior varies by provider.
+- Autoplay can fail. Browsers decide per page load based on audio state, whether the user has interacted with your site before, browser settings, and platform policy.
+- Muted autoplay is broadly allowed. Unmuted autoplay is blocked on first visit in most browsers; do not rely on it.
+- Without inline playback, iPhone Safari opens the video in fullscreen when playback starts.
+- Low-power mode and data-saver settings can block even muted autoplay. This is why the recommended approach keeps a manual play control.
+- Programmatic volume control is unsupported on some platforms. The [volume feature](../reference/api/feature-volume.md) exposes this as `volumeAvailability: 'available' | 'unavailable' | 'unsupported'`; iOS Safari reports `'unsupported'`, and `'unavailable'` means the feature hasn’t attached to a media element yet.
+- This guide applies to media components that render a video element (`<video>`, `<hlsjs-video>`, `<dash-video>`, `<mux-video>`, and the like). Embed components (YouTube, Vimeo, TikTok, Twitch) forward autoplay to the third-party player, which applies its own autoplay rules; muted and inline behavior varies by provider.
 
 ## Common variations
 
 ### Background video
 
-Background video autoplays, loops, stays muted, and omits interactive controls. Use `HlsBackgroundVideo` instead of configuring these behaviors yourself: it applies them by default and streams an HLS source, picking one rendition that fits the screen for the whole session.
+Background video autoplays, loops, stays muted, and omits interactive controls. Use `<hls-background-video>` instead of configuring these behaviors yourself: it applies them by default and streams an HLS source, picking one rendition that fits the screen for the whole session.
 
 Install the SPF adapter with the HTML façade:
 
-bash
-
-```
+```bash
 pnpm add @videojs/html @videojs/spf
 ```
 
-html
-
-```
+```html
 <hls-background-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hls-background-video>
 <script type="module">
   import '@videojs/html/media/hls-background-video';
 </script>
 ```
 
-If you have a progressive MP4 or WebM file instead of an HLS stream, `BackgroundVideo` is the same component without the streaming engine. See [BackgroundVideo](../reference/background-video.md) for opt-out attributes and sizing.
+If you have a progressive MP4 or WebM file instead of an HLS stream, `<background-video>` is the same component without the streaming engine. See [`<background-video>`](../reference/components/background-video.md) for opt-out attributes and sizing.
 
 ### Autoplay with sound
 
@@ -132,9 +127,7 @@ Do not rely on unmuted autoplay for a user’s first visit. Start playback from
 
 Call `play()` on the media element from a click handler:
 
-html
-
-```
+```html
 <video-player>
   <media-container>
     <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
@@ -158,10 +151,10 @@ Because playback starts from a user gesture, the browser allows it unmuted.
 
 Confirm that:
 
-*   The media is muted.
-*   Inline playback is enabled.
-*   The source loads (check the network panel).
-*   A manual play control is available as a fallback.
+- The media is muted.
+- Inline playback is enabled.
+- The source loads (check the network panel).
+- A manual play control is available as a fallback.
 
 If autoplay is blocked, the player stays paused and the Play button remains in its play state; there is no error state to handle.
 
@@ -171,22 +164,24 @@ Enable inline playback with the `playsinline` attribute on the media element.
 
 ### The video starts without sound
 
-Expected with muted autoplay. Let the user unmute through a [Mute button](../reference/mute-button.md) or [Volume slider](../reference/volume-slider.md) rather than unmuting programmatically; programmatic volume changes are unsupported on some platforms.
+Expected with muted autoplay. Let the user unmute through a [Mute button](../reference/components/mute-button.md) or [Volume slider](../reference/components/volume-slider.md) rather than unmuting programmatically; programmatic volume changes are unsupported on some platforms.
+
+## Related pages
 
-## Related components
+### Components
 
-*   [Play button](../reference/play-button.md)
-*   [Mute button](../reference/mute-button.md)
-*   [BackgroundVideo](../reference/background-video.md)
-*   [Controls](../reference/controls.md)
+- [media-play-button](../reference/components/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
+- [media-mute-button](../reference/components/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
+- [background-video](../reference/components/background-video.md): Decorative background video element with automatic muting and looping
+- [media-controls](../reference/components/controls.md): Container component for composing and auto-hiding video player controls on user interaction
 
-## Related API
+### API
 
-*   [Playback feature](../reference/feature-playback.md)
-*   [Volume feature](../reference/feature-volume.md)
-*   [usePlayer](/docs/framework/react/reference/use-player)
+- [Playback](../reference/api/feature-playback.md): Play/pause state and actions for the player store
+- [Volume](../reference/api/feature-volume.md): Volume level and mute state for the player store
+- [PlayerController](../reference/api/player-controller.md): Reactive controller for accessing player store state in HTML custom elements
 
-## Related guides
+### Guides
 
-*   [Features](../concepts/features.md)
-*   [Browser support](../concepts/browser-support.md)
+- [Features](./features.md): The state and actions each feature adds to the player
+- [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and what the stylesheets need from them

package/docs/{how-to/add-a-background-video.md → guides/background-video.md}

@@ -6,21 +6,11 @@ Add a decorative video behind your page content. Start with an MP4 or WebM file,
 
 ## Recommended approach
 
-Use [BackgroundVideo](../reference/background-video.md) with an MP4 or WebM URL. Put the video and poster inside a wrapper with `aria-hidden="true"` because both are decorative. Keep the heading, links, and other page content outside that wrapper.
+Use [`<background-video>`](../reference/components/background-video.md) with an MP4 or WebM URL. Put the video and poster inside a wrapper with `aria-hidden="true"` because both are decorative. Keep the heading, links, and other page content outside that wrapper.
 
-![](https://image.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/thumbnail.webp)
+**index.html**
 
-### Build the next great video experience
-
-[Compare source options](#common-variations)
-
-index.html
-
-index.css
-
-index.ts
-
-```
+```html
 <section class="add-background-video-html-demo">
   <div class="add-background-video-html-demo__visual" aria-hidden="true">
     <img class="add-background-video-html-demo__poster" src="https://image.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/thumbnail.webp" alt="" />
@@ -35,7 +25,10 @@ index.ts
   </div>
 </section>
 ```
-```
+
+**index.css**
+
+```css
 .add-background-video-html-demo {
   position: relative;
   display: grid;
@@ -114,13 +107,16 @@ index.ts
   }
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/media/background-video';
 ```
 
 ## How it works
 
-BackgroundVideo renders the browser’s `<video>` element and starts it muted, looped, autoplaying, and inline. The example puts that video and an empty-alt poster in the `.hero-visual` wrapper. The wrapper is hidden from assistive technology and ignores pointer input, so it does not act like a media player.
+`<background-video>` renders the browser’s `<video>` element and starts it muted, looped, autoplaying, and inline. The example puts that video and an empty-alt poster in the `.hero-visual` wrapper. The wrapper is hidden from assistive technology and ignores pointer input, so it does not act like a media player.
 
 The page defines the hero’s size. The video fills that space with `--media-object-fit: cover`, while the poster remains visible until the video paints a frame. The reduced-motion rule hides the video and leaves the poster in place.
 
@@ -128,41 +124,30 @@ Set the size, position, and transforms on the `.hero-visual` wrapper so the post
 
 ## Availability and constraints
 
-*   Use a source the browser can play directly, such as MP4 or WebM.
-*   Safari can play HLS URLs directly. Other browsers cannot do so reliably, so use an HLS variation below when the same `.m3u8` URL must work across browsers.
-*   BackgroundVideo does not create a poster or report analytics. Keep the poster in your page and add analytics only when you need them.
-*   Video.js does not apply a reduced-motion policy for you. The example stops the decoration with `prefers-reduced-motion`.
-*   If the video communicates information, remove `aria-hidden`, give it an accessible name and controls, and use a regular video player.
+- Use a source the browser can play directly, such as MP4 or WebM.
+- Safari can play HLS URLs directly. Other browsers cannot do so reliably, so use an HLS variation below when the same `.m3u8` URL must work across browsers.
+- `<background-video>` does not create a poster or report analytics. Keep the poster in your page and add analytics only when you need them.
+- Video.js does not apply a reduced-motion policy for you. The example stops the decoration with `prefers-reduced-motion`.
+- If the video communicates information, remove `aria-hidden`, give it an accessible name and controls, and use a regular video player.
 
 ## Common variations
 
 Choose a variation based on the source you already have:
 
-Need
-
-Use
-
-Cross-browser HLS with a small background-only player
-
-[HlsBackgroundVideo](../reference/hls-background-video.md)
-
-The same background-only player for a Mux HLS URL
-
-[MuxBackgroundVideo](../reference/mux-background-video.md)
+| Need | Use |
+| --- | --- |
+| Cross-browser HLS with a small background-only player | [`<hls-background-video>`](../reference/components/hls-background-video.md) |
+| The same background-only player for a Mux HLS URL | [`<mux-background-video>`](../reference/components/mux-background-video.md) |
 
 ### Play an HLS video
 
-HlsBackgroundVideo plays an HLS video without adding controls, audio, or captions. Pass a complete HLS URL through `src`:
-
-bash
+`<hls-background-video>` plays an HLS video without adding controls, audio, or captions. Pass a complete HLS URL through `src`:
 
-```
+```bash
 pnpm add @videojs/html @videojs/spf
 ```
 
-html
-
-```
+```html
 <script type="module">
   import '@videojs/html/media/hls-background-video';
 </script>
@@ -178,13 +163,11 @@ Your HLS stream must be unencrypted and use fragmented MP4 video segments, also
 
 ### Play a Mux HLS URL
 
-MuxBackgroundVideo is a Mux-named alias for HlsBackgroundVideo. Pass a complete Mux HLS URL, not a bare playback ID or `source` object:
+`<mux-background-video>` is a Mux-named alias for `<hls-background-video>`. Pass a complete Mux HLS URL, not a bare playback ID or `source` object:
 
-It uses the same `@videojs/spf` installation shown for HlsBackgroundVideo above.
+It uses the same `@videojs/spf` installation shown for `<hls-background-video>` above.
 
-html
-
-```
+```html
 <script type="module">
   import '@videojs/html/media/mux-background-video';
 </script>
@@ -202,7 +185,7 @@ This component does not create a Mux poster, preview thumbnails, or analytics se
 
 ### An HLS URL works in Safari but not another browser
 
-BackgroundVideo hands its `src` to the browser’s `<video>` element. Use HlsBackgroundVideo for a supported fMP4 HLS source, or MuxBackgroundVideo for a Mux HLS URL.
+`<background-video>` hands its `src` to the browser’s `<video>` element. Use `<hls-background-video>` for a supported fMP4 HLS source, or `<mux-background-video>` for a Mux HLS URL.
 
 ### The video does not fill or follow transforms
 
@@ -212,12 +195,14 @@ Set the size, transforms, and measurements on the wrapper that contains the vide
 
 The background-video components do not provide them. Render an empty-alt poster in the same wrapper as the video, and add analytics separately.
 
-## Related components
+## Related pages
+
+### Components
 
-*   [BackgroundVideo](../reference/background-video.md)
-*   [HlsBackgroundVideo](../reference/hls-background-video.md)
-*   [MuxBackgroundVideo](../reference/mux-background-video.md)
+- [background-video](../reference/components/background-video.md): Decorative background video element with automatic muting and looping
+- [hls-background-video](../reference/components/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
+- [mux-background-video](../reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
 
-## Related guides
+### Guides
 
-*   [Add a poster and loading placeholder](./add-a-poster-and-loading-placeholder.md)
+- [Add a poster and loading placeholder](./poster.md): Set the image shown before playback, then add a lightweight placeholder while it loads

package/docs/guides/browser-support.md

@@ -0,0 +1,145 @@
+# Browser support
+
+Browsers and rendering environments supported by Video.js 10, and what the stylesheets need from them
+
+Video.js 10 supports the **latest two stable versions** of Chrome, Edge, Firefox, Safari, and Safari on iOS. This page shows the versions that means today, what the packaged skins need from a browser, and how to reach older ones.
+
+## Browser baseline
+
+The build reads the policy from a [browserslist](https://browsersl.ist) query in the repository, and this page resolves the same query when the docs are built:
+
+*Supported browsers and the versions the support policy resolves to today*
+
+| Browser | Versions |
+| --- | --- |
+| Chrome | 150 and 151 |
+| Edge | 150 and 151 |
+| Firefox | 153 and 154 |
+| Safari | 26.5 and 26.6 |
+| Safari on iOS | 26.5 and 26.6 |
+
+These are the versions we test in and fix bugs for. We build directly on the web platform, with [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements), [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope), [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries), and [anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning), and we do not hold a feature back to keep older versions working. Older versions often work anyway:
+
+In practice the packaged skins render in Chrome 120, Edge 120, Firefox 146, Safari 17.4, and Safari on iOS 17.4 and later. Those versions account for 89.2% of global web usage according to [caniuse-lite](https://github.com/browserslist/caniuse-lite) 1.0.30001810, and this figure updates when we update that data.
+
+## CSS requirements
+
+The packaged skins are generated CSS, and a handful of newer features hold a skin together. **Required** features have no fallback: without them the player shows no component styling, and `@scope` alone sets the floor. **Degrades** features lose one visual detail. **Has a fallback** features sit inside [`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports); anchor positioning falls back to positions computed in JavaScript.
+
+The table reads the first fully supporting version of each feature from [caniuse-lite](https://github.com/browserslist/caniuse-lite) when the docs build, and feature names link to [caniuse.com](https://caniuse.com/). The **effective floor** is the newest required version in each column.
+
+*First browser version that fully supports each CSS feature the packaged skins use, with the share of global web usage on supporting browsers. Feature names link to their caniuse.com support data. "Not supported" means the browser has no full support. Paired browsers share a column and show two values only when they differ. The effective floor row is the newest required version in each column.*
+
+| Feature | Chrome and Edge | Firefox | Safari and iOS | Global support |
+| --- | --- | --- | --- | --- |
+| [`@scope`](https://caniuse.com/css-cascade-scope) Required. No component styling. | 118 | 146 | 17.4 | 90.0% |
+| [`CSS nesting`](https://caniuse.com/css-nesting) Required. No component styling. | 120 | 117 | 17.2 | 90.7% |
+| [`@layer`](https://caniuse.com/css-cascade-layers) Required. No component styling. | 99 | 97 | 15.4 | 95.3% |
+| [`:has()`](https://caniuse.com/css-has) Required. Menu and slider focus states are lost. | 105 | 121 | 15.4 | 94.1% |
+| [`@container`](https://caniuse.com/css-container-queries) Required. Controls do not adapt to player width. | 106 | 110 | 16 | 94.0% |
+| [`Media query range syntax`](https://caniuse.com/css-media-range-syntax) Required. Large-screen sizing is lost. | 104 | 63 | 16.4 | 94.0% |
+| [`:dir()`](https://caniuse.com/css-dir-pseudo) Required. Right-to-left layout is lost. | 120 | 17 | 16.4 | 91.4% |
+| [`Relative color syntax`](https://caniuse.com/css-relative-colors) Degrades. Adaptive shadows are lost. | 131 | 133 | 18 | 85.7% |
+| [`scrollbar-color and scrollbar-width`](https://caniuse.com/css-scrollbar) Degrades. Menus show default scrollbars. | 121 | 64 | 26.2 | 85.6% |
+| [`backdrop-filter`](https://caniuse.com/css-backdrop-filter) Degrades. Surfaces lose their blur. | 76 / 17 | 103 | 9 | 95.7% |
+| [`Anchor positioning`](https://caniuse.com/css-anchor-positioning) Has a fallback. Popups are positioned by JavaScript. | 125 | 147 | 26 | 84.1% |
+| Effective floor | 120 | 146 | 17.4 | 89.2% |
+
+A few features have no caniuse entry. [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) is required but older than the floor (Chrome 111, Firefox 113, Safari 15.4). [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark), [relative colors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors), [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property), and [`contrast-color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color) each degrade on their own; set `--media-accent-text-color` from [Customize skins](./customize-skins.md) if you support browsers without `contrast-color()`. [Firefox ESR](https://www.mozilla.org/en-US/firefox/enterprise/) releases older than 146 lack `@scope`, so the skins render unstyled there.
+
+The JavaScript has a lower floor: ES2022 syntax, with newer APIs feature-detected, so it runs in Chrome 102, Firefox 112, and Safari 16.4 or later. The stylesheet decides whether an older browser shows a working player.
+
+### Support older browsers
+
+To reach browsers below the floor, recompile the skin stylesheet with fallbacks. Only a stylesheet your build processes can be recompiled.
+
+Packaged HTML skins inline their CSS into JavaScript, so [add the skin source to your project](./customize-skins.md#style-skin-source) first. The added `skin.css` can pass through your CSS pipeline. CDN bundles inline their CSS too; to recompile it, move to a [self-hosted build](./self-hosting.md) and use the skin source instead of the prebuilt CDN skin.
+
+[lightningcss](https://lightningcss.dev/transpilation.html) and [postcss-preset-env](https://preset-env.cssdb.org/) both read a browserslist query and add what those browsers lack: they flatten nesting and rewrite `:dir()`, range media queries, `light-dark()`, and `oklch()` in ordinary declarations, and add vendor prefixes. Neither rewrites `@scope` or `:scope`, so a small plugin flattens each block into descendant selectors prefixed with [`:where(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:where), which adds no specificity. The PostCSS version, picked up by Vite, Next.js, and most bundlers from `postcss.config.mjs`:
+
+```bash
+npm install --save-dev postcss postcss-preset-env postcss-selector-parser
+```
+
+**postcss.config.mjs**
+
+```js
+import presetEnv from 'postcss-preset-env';
+import selectorParser from 'postcss-selector-parser';
+
+/** Rewrite `@scope (<root>) { … }` into descendant selectors that older browsers understand. */
+function flattenScope() {
+  const rewrite = (selector, root) =>
+    selectorParser((selectors) => {
+      selectors.each((sel) => {
+        let referencesRoot = false;
+
+        sel.walk((node) => {
+          if (node.type === 'nesting' || (node.type === 'pseudo' && node.value === ':scope')) {
+            node.replaceWith(selectorParser.string({ value: root }));
+            referencesRoot = true;
+          }
+        });
+
+        if (!referencesRoot) {
+          sel.prepend(selectorParser.combinator({ value: ' ' }));
+          sel.prepend(selectorParser.string({ value: `:where(${root})` }));
+        }
+      });
+    }).processSync(selector);
+
+  return {
+    postcssPlugin: 'flatten-scope',
+    OnceExit(css) {
+      const scopes = [];
+      css.walkAtRules('scope', (atRule) => scopes.push(atRule));
+
+      // Innermost first, so a nested scope is flattened before its parent prefixes it.
+      for (const atRule of scopes.reverse()) {
+        const match = /^\(\s*(.+?)\s*\)\s*$/.exec(atRule.params);
+        if (!match || /\)\s*to\s*\(/.test(atRule.params)) continue;
+
+        atRule.walkRules((rule) => {
+          rule.selectors = rule.selectors.map((selector) => rewrite(selector.trim(), match[1]));
+        });
+        atRule.replaceWith(atRule.nodes);
+      }
+    },
+  };
+}
+flattenScope.postcss = true;
+
+export default {
+  plugins: [flattenScope(), presetEnv({ browsers: 'baseline widely available', stage: 2 })],
+};
+```
+
+The result renders in Chrome 111, Firefox 121, and Safari 16.4 or later, the floor [Tailwind CSS 4 documents](https://tailwindcss.com/docs/compatibility#browser-support), because `:has()`, `@container`, `@layer`, and `color-mix()` have no fallback. Flattening `@scope` trades scope proximity for source order; the packaged skins never nest a component inside itself, so the output matches. Run `npx browserslist "baseline widely available"` to see what the query resolves to today, or pick another query for your audience.
+
+## Rendering contexts
+
+### WebViews
+
+A WebView is a browser engine embedded inside a native app. WebViews on iOS ([WKWebView](https://developer.apple.com/documentation/webkit/wkwebview)) and Android ([Android WebView](https://developer.android.com/reference/android/webkit/WebView)) can behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary.
+
+Video.js 10 targets standard browser environments. If you embed a player inside a native app, test it on each platform and WebView version you support.
+
+### Progressive Web Apps
+
+Installed Progressive Web Apps (PWAs) use the browser engine, but their standalone display mode and platform policies can affect fullscreen, media sessions, and other browser integration. Test playback both in a browser tab and in the installed app.
+
+### Smart TVs and set-top boxes
+
+TV platforms run embedded browsers with limited standards support. Video.js 10’s core is not tied to any specific platform, which makes future TV adapters possible, but TV is not a supported target today.
+
+### Server-side rendering
+
+Video.js components render valid markup on the server. Interactivity — state management, media playback, and event handling — requires the browser and kicks in after hydration.
+
+## Related pages
+
+### Guides
+
+- [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Installation](./installation.md): Install Video.js packages and build an accessible, customizable video player with composable controls
+- [Bundlers](./bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries