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

package/docs/{how-to/add-quality-selector.md → guides/quality.md}

@@ -2,21 +2,17 @@
 
 Read available renditions, let the engine adapt automatically, and offer manual quality selection.
 
-Read the renditions a stream offers, let the streaming engine adapt quality automatically, and give users manual control when they want it.
+Quality selection applies to streaming sources. A progressive MP4 plays at one fixed quality and exposes no renditions; HLS and DASH streams offer several. See [Media sources](./media-sources.md).
 
-Quality selection applies to streaming sources. A progressive MP4 plays at one fixed quality and exposes no renditions; HLS and DASH streams offer several. See [Media sources](../concepts/media-sources.md).
-
-Note
-
-Using a pre-built [skin](../concepts/skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](../concepts/ui-components.md).
+> **Note**
+>
+> Using a pre-built [skin](./skins.md)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](./ui-components.md).
 
 ## Installation
 
 This guide uses the hls.js media component, so install its adapter with the framework façade:
 
-bash
-
-```
+```bash
 pnpm add @videojs/html @videojs/hlsjs-video
 ```
 
@@ -24,15 +20,9 @@ pnpm add @videojs/html @videojs/hlsjs-video
 
 Let automatic quality selection do its job by default, and offer a quality menu for users who want to pin a rendition. Render the menu only when quality selection is available.
 
-Quality
+**index.html**
 
-index.html
-
-index.css
-
-index.ts
-
-```
+```html
 <video-player class="video-player">
   <media-container>
     <hlsjs-video
@@ -66,7 +56,10 @@ index.ts
   </media-container>
 </video-player>
 ```
-```
+
+**index.css**
+
+```css
 .video-player media-container {
   position: relative;
   display: block;
@@ -154,32 +147,38 @@ media-menu-radio-item[aria-checked="true"] .menu-indicator {
   opacity: 1;
 }
 ```
-```
+
+**index.ts**
+
+```ts
 import '@videojs/html/video/player';
 import '@videojs/html/ui/container';
 import '@videojs/html/media/hlsjs-video';
 import '@videojs/html/ui/menu';
+import '@videojs/html/ui/menu-content';
+import '@videojs/html/ui/menu-radio-item';
+import '@videojs/html/ui/menu-item-indicator';
 import '@videojs/html/ui/quality-radio-group';
 ```
 
 ## How it works
 
-The [quality feature](../reference/feature-quality.md) mirrors the media element’s video renditions into player state:
+The [quality feature](../reference/api/feature-quality.md) mirrors the media element’s video renditions into player state:
 
-*   `videoRenditionList` holds each rendition’s `id`, `width`, `height`, `bitrate`, `frameRate`, `codec`, and whether it’s `selected`.
-*   `activeVideoRendition` is the rendition currently playing. When the engine doesn’t report one directly, the player matches it from the video’s current dimensions.
-*   `selectVideoRendition(value)` pins one rendition; pass `'auto'` to return control to the engine’s adaptive selection.
+- `videoRenditionList` holds each rendition’s `id`, `width`, `height`, `bitrate`, `frameRate`, `codec`, and whether it’s `selected`.
+- `activeVideoRendition` is the rendition currently playing. When the engine doesn’t report one directly, the player matches it from the video’s current dimensions.
+- `selectVideoRendition(value)` pins one rendition; pass `'auto'` to return control to the engine’s adaptive selection.
 
-[`<media-quality-radio-group>`](../reference/quality-radio-group.md) turns this state into a ready-made radio menu with resolution labels and an “Auto” entry, as shown in the demo above.
+[`<media-quality-radio-group>`](../reference/components/quality-radio-group.md) turns this state into a ready-made radio menu with resolution labels and an “Auto” entry, as the example above shows.
 
 Selecting “Auto” keeps adaptive bitrate switching active: the engine picks the best rendition for current bandwidth and viewport. Pinning a rendition disables adaptation until the user selects “Auto” again.
 
 ## Availability and constraints
 
-*   Quality availability is `'unavailable'` for media that doesn’t offer a choice — progressive files, streams before the manifest loads, and single-rendition streams. Render quality UI conditionally; the demo’s availability check does this.
-*   Renditions come from the streaming engine, so the list depends on what the manifest declares. A single-rendition stream offers no meaningful selection, so availability stays `'unavailable'`.
-*   Pinning a high rendition on a slow connection causes buffering: the engine can no longer step down. Keep “Auto” the default.
-*   Rendition lists change on source change; selection resets with them.
+- Quality availability is `'unavailable'` for media that doesn’t offer a choice — progressive files, streams before the manifest loads, and single-rendition streams. Render quality UI conditionally on that value.
+- Renditions come from the streaming engine, so the list depends on what the manifest declares. A single-rendition stream offers no meaningful selection, so availability stays `'unavailable'`.
+- Pinning a high rendition on a slow connection causes buffering: the engine can no longer step down. Keep “Auto” the default.
+- Rendition lists change on source change; selection resets with them.
 
 ## Common variations
 
@@ -189,13 +188,13 @@ If you don’t want to expose manual selection, do nothing: adaptive selection i
 
 ### Cap or pin quality programmatically
 
-Access the player store through the [player controller](../reference/player-controller.md) and call `selectVideoRendition` with a rendition `id` from `videoRenditionList`, or `'auto'` to restore adaptive selection.
+Access the player store through the [player controller](../reference/api/player-controller.md) and call `selectVideoRendition` with a rendition `id` from `videoRenditionList`, or `'auto'` to restore adaptive selection.
 
 ## Troubleshooting
 
 ### The quality menu doesn’t render
 
-Quality availability is `'unavailable'`. The source is progressive (no renditions), the manifest hasn’t loaded yet, or the media element doesn’t support renditions. Use a streaming media element such as the default [HlsVideo](../reference/hls-video.md) or [HlsJsVideo](../reference/hlsjs-video.md).
+Quality availability is `'unavailable'`. The source is progressive (no renditions), the manifest hasn’t loaded yet, or the media element doesn’t support renditions. Use a streaming media element such as [`<hls-video>`](../reference/components/hls-video.md) or [`<hlsjs-video>`](../reference/components/hlsjs-video.md).
 
 ### The menu doesn’t render for a single-rendition stream
 
@@ -205,19 +204,20 @@ The manifest declares a single rendition, so quality availability stays `'unavai
 
 The pinned rendition exceeds available bandwidth. Selecting “Auto” lets the engine step down again.
 
-## Related components
+## Related pages
+
+### Components
 
-*   [Quality radio group](../reference/quality-radio-group.md)
-*   [Menu](../reference/menu.md)
+- [media-quality-radio-group](../reference/components/quality-radio-group.md): A menu radio group for selecting video quality
+- [media-menu](../reference/components/menu.md): A composable menu component for settings, option selection, and actions
 
-## Related API
+### API
 
-*   [Quality feature](../reference/feature-quality.md)
-*   [useQualityOptions](/docs/framework/react/reference/use-quality-options)
-*   [HlsVideo](../reference/hls-video.md)
-*   [HlsJsVideo](../reference/hlsjs-video.md)
-*   [DashVideo](../reference/dash-video.md)
+- [Quality](../reference/api/feature-quality.md): Video rendition state and actions for the player store
+- [hls-video](../reference/components/hls-video.md): Lightweight HLS video element with minimal bundle size
+- [hlsjs-video](../reference/components/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
+- [dash-video](../reference/components/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
 
-## Related guides
+### Guides
 
-*   [Media sources](../concepts/media-sources.md)
+- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property

package/docs/{how-to/self-host-the-player.md → guides/self-hosting.md}

@@ -2,31 +2,27 @@
 
 Serve the Video.js HTML player from your own origin for offline, air-gapped, or restricted-network deployments
 
-By default, the [installation](./installation.md) flow loads the player from a public CDN. For offline, air-gapped, or locked-down deployments, you can serve everything from your own origin instead.
+The [CDN installation](./installation-cdn.md) loads the player from a public CDN. For offline, air-gapped, or locked-down deployments, you can serve everything from your own origin instead.
 
 ## Recommended approach
 
 Bundle a single file: install the package, put the player’s imports into an entry file, then let any bundler produce one self-contained module you can host anywhere. For the default video player, that’s:
 
-player.js
+**player.js**
 
-```
+```js
 import '@videojs/html/video/player';
 import '@videojs/html/video/skin';
 ```
 
-bash
-
-```
+```bash
 npm install @videojs/html
 npx esbuild player.js --bundle --format=esm --minify --sourcemap --outfile=public/player.js
 ```
 
 Load the output with `type="module"`:
 
-html
-
-```
+```html
 <script type="module" src="/player.js"></script>
 ```
 
@@ -34,7 +30,7 @@ You get one file (plus a sourcemap), no runtime requests to a CDN, and only the
 
 ## Availability and constraints
 
-*   HLS and other non-default media need their own module on top of the player, and your self-hosted build has to include it. When bundling HlsJsVideo, install `@videojs/hls.js` with `@videojs/html`, add `import '@videojs/html/media/hlsjs-video';` to the entry file, and use `<hlsjs-video>` for the `.m3u8` source. The smaller default HlsVideo uses `@videojs/spf`; DASH, Shaka, Vimeo, and Wistia use `@videojs/dash.js`, `@videojs/shaka`, `@videojs/vimeo`, and `@videojs/wistia`. When mirroring the CDN package, adapters are already bundled: serve the matching media file and add its script tag, such as `<script type="module" src="/videojs/media/hlsjs-video.js"></script>`.
+- HLS and other non-default media need their own module on top of the player, and your self-hosted build has to include it. When bundling `<hlsjs-video>`, install `@videojs/hlsjs-video` with `@videojs/html`, add `import '@videojs/html/media/hlsjs-video';` to the entry file, and use `<hlsjs-video>` for the `.m3u8` source. The smaller default `<hls-video>` comes with `@videojs/html`. DASH, Shaka, Vimeo, and Wistia use `@videojs/dash-video`, `@videojs/shaka-video`, `@videojs/vimeo-video`, and `@videojs/wistia-video`. When mirroring the CDN package, adapters are already bundled: serve the matching media file and add its script tag, such as `<script type="module" src="/videojs/media/hlsjs-video.js"></script>`.
 
 ## Common variations
 
@@ -46,46 +42,42 @@ Bundle a single file when you already build your front end. Download the release
 
 Unpack it into whatever your server treats as static files:
 
-bash
-
-```
-VIDEOJS_VERSION=10.0.0-rc.2
+```bash
+VIDEOJS_VERSION=10.0.0-rc.3
 curl -fLO "https://github.com/videojs/v10/releases/download/@videojs/cdn@${VIDEOJS_VERSION}/videojs-cdn-${VIDEOJS_VERSION}.zip"
 unzip "videojs-cdn-${VIDEOJS_VERSION}.zip" -d public/
 ```
 
 Then point a script tag at the player you want:
 
-html
-
-```
-<script type="module" src="/videojs-cdn-10.0.0-rc.2/video.js"></script>
+```html
+<script type="module" src="/videojs-cdn-10.0.0-rc.3/video.js"></script>
 ```
 
 The archive holds the same production bundles the CDN serves, minus sourcemaps and development builds. Every path inside it is relative, so it runs from any origin with no outbound requests. `SHA256SUMS` on the release verifies the download.
 
 For Composer-based projects such as Drupal, declare the archive as a package:
 
-composer.json
+**composer.json**
 
-```
+```json
 {
   "repositories": [
     {
       "type": "package",
       "package": {
         "name": "videojs/cdn",
-        "version": "10.0.0-rc.2",
+        "version": "10.0.0-rc.3",
         "type": "drupal-library",
         "dist": {
           "type": "zip",
-          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.2/videojs-cdn-10.0.0-rc.2.zip"
+          "url": "https://github.com/videojs/v10/releases/download/@videojs/cdn@10.0.0-rc.3/videojs-cdn-10.0.0-rc.3.zip"
         }
       }
     }
   ],
   "require": {
-    "videojs/cdn": "10.0.0-rc.2"
+    "videojs/cdn": "10.0.0-rc.3"
   }
 }
 ```
@@ -96,13 +88,11 @@ Composer strips the archive’s top-level directory, so the player lands directl
 
 To skip the bundler, copy the prebuilt CDN bundle to your server as-is.
 
-Copy the whole package directory
-
-The CDN entry files like `video.js` and `media/hlsjs-video.js` are not standalone. They import shared, content-hashed chunks (`default-*.js`, `ui-*.js`, and more) that live alongside them. Copying a single file breaks at runtime, so mirror the entire `@videojs/cdn` directory and keep its layout intact.
-
-bash
+> **Caution: Copy the whole package directory**
+>
+> The CDN entry files like `video.js` and `media/hlsjs-video.js` are not standalone. They import shared, content-hashed chunks (such as `adapter-<hash>.js` and `create-player-<hash>.js`) that live alongside them. Copying a single file breaks at runtime, so mirror the entire `@videojs/cdn` directory and keep its layout intact.
 
-```
+```bash
 npm install @videojs/cdn
 mkdir -p public
 cp -r node_modules/@videojs/cdn public/videojs
@@ -110,9 +100,7 @@ cp -r node_modules/@videojs/cdn public/videojs
 
 Then point the script tag at your copy instead of the CDN:
 
-html
-
-```
+```html
 <script type="module" src="/videojs/video.js"></script>
 ```
 
@@ -126,20 +114,20 @@ Every bundle inlines its own CSS and applies it when the custom element upgrades
 
 `global.css` holds the light-DOM rules — `display: contents` on `<video-player>`, and the box the media and poster stretch to fill. Link it ahead of the bundle and the player reserves its space on first paint instead of on upgrade:
 
-html
-
-```
+```html
 <link rel="stylesheet" href="/videojs/global.css" />
 <script type="module" src="/videojs/video.js"></script>
 ```
 
 The background preset keeps its light-DOM rules in `background.css` instead.
 
-The rest — `video.css`, `audio.css`, one per skin, and the `shared.css` they build on — are shadow-DOM styles. No skin exposes a `::part`, so linking these from the document has no effect. They apply only inside a shadow root, which each skin builds and styles itself.
+The skin sheets, such as `video.css` and `audio.css`, combine the shared document rules, shadow-host rules, and complete skin styles. The JavaScript bundle applies the same styles automatically. Use the matching sheet inside a declarative shadow root when you render a skin template on the server. Linking it from the document does not style markup inside an existing shadow root.
 
-Declarative shadow DOM
+`shadow.css` contains only the shared host and slotted-media rules. Use it as a base when you write your own shadow-root skin; it is not a complete skin stylesheet.
 
-A skin skips building and styling its shadow root when one already exists, so markup that ships a `<template shadowrootmode="open">` has to carry the matching stylesheet inside that template. Today only `background-video-skin` exposes its template for server rendering; the other skins keep theirs in JavaScript, so this path needs a hand-written template.
+> **Note: Declarative shadow DOM**
+>
+> A skin skips building and styling its shadow root when one already exists, so markup that ships a `<template shadowrootmode="open">` has to carry the matching stylesheet inside that template. Today only `background-video-skin` exposes its template for server rendering; the other skins keep theirs in JavaScript, so this path needs a hand-written template.
 
 ## Troubleshooting
 
@@ -147,7 +135,9 @@ A skin skips building and styling its shadow root when one already exists, so ma
 
 There is no console error. The media module for your format isn’t part of your self-hosted build. Add the media import to your bundle entry file, or serve the media file and its script tag alongside the player, as described in [Availability and constraints](#availability-and-constraints).
 
-## Related guides
+## Related pages
+
+### Guides
 
-*   [Installation](./installation.md)
-*   [Media sources](../concepts/media-sources.md)
+- [Installation](./installation.md): Install Video.js packages and build an accessible, customizable video player with composable controls
+- [Media sources](./media-sources.md): Set what a media element plays and how its engine plays it with the structured source property

package/docs/guides/skins.md

@@ -0,0 +1,68 @@
+# Skins
+
+Packaged player designs that include both UI components and their styles.
+
+> **Note: New in version 10**
+>
+> In prior versions of Video.js, skins were CSS-only themes applied to the same set of default controls. In version 10 the concept of skins has been expanded to include the UI components, so each skin can be completely unique and only include the UI components it needs.
+
+A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.
+
+## Packaged skins and skin source
+
+When you choose a skin, you can import the packaged version or add its source to your project. It’s usually easiest to start with a packaged skin and add its source when you need more customization.
+
+Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, add the skin source to your project and change the components and styles directly.
+
+| Packaged skin | Skin source in your project |
+| --- | --- |
+| Single component | Many UI components |
+| Documented CSS custom properties | Editable components and styles |
+| Future design updates auto-applied by bumping the version | Future design updates manually applied, or intentionally ignored |
+
+### Packaged skin
+
+```html
+<script type="module">
+  import '@videojs/html/video/player';
+  import '@videojs/html/video/skin';
+</script>
+
+<video-player>
+  <video-skin>
+    <video src="video.mp4"></video>
+  </video-skin>
+</video-player>
+```
+
+Don’t depend on elements, class names, or undocumented custom properties inside a packaged skin. They may change between releases.
+
+- [Style a packaged skin](./customize-skins.md#style-a-packaged-skin)
+
+### Skin source in your project
+
+The skin source contains the complete interface. You can add, remove, rearrange, or restyle any part of it.
+
+- [Style skin source](./customize-skins.md#style-skin-source)
+
+### Custom interface
+
+You can also build an interface without starting from a skin. In that model, you choose and arrange individual [UI components](./ui-components.md) around the media. This takes more work, but it avoids inheriting a skin’s layout and interactions.
+
+- [Build your own component](./build-your-own-component.md)
+
+## Skins, features, and presets
+
+Each skin is built with specific [features](./features.md) in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.
+
+You’ll find a preconfigured player, its typed controller, a skin, and the matching feature bundle exported from the same path. We call these paths **presets**.
+
+| Import | Description | Details |
+| --- | --- | --- |
+| `@videojs/html/video` | General-purpose video player preset with full playback controls. | **Feature bundle:** `videoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [quality](../reference/api/feature-quality.md), [audioTrack](../reference/api/feature-audio-track.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<video-minimal-skin>`, `<video-skin>`; **Default media element:** `<video>` |
+| `@videojs/html/audio` | Audio-only player preset with playback and volume controls. | **Feature bundle:** `audioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [playbackRate](../reference/api/feature-playback-rate.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<audio-minimal-skin>`, `<audio-skin>`; **Default media element:** `<audio>` |
+| `@videojs/html/background` | Ambient background video preset with no user controls. | **Feature bundle:** `backgroundFeatures`; **Features:** –; **Skins:** `<background-video-skin>`; **Default media element:** `<background-video>` |
+| `@videojs/html/live-audio` | Live audio player preset — `audio` minus playback rate, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveAudioFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-audio-minimal-skin>`, `<live-audio-skin>`; **Default media element:** `<audio>` |
+| `@videojs/html/live-video` | Live video player preset — `video` minus playback rate, quality selection, and audio-track selection, plus the live feature, with a skin that swaps the time slider and time displays for a Live button. | **Feature bundle:** `liveVideoFeatures`; **Features:** [playback](../reference/api/feature-playback.md), [volume](../reference/api/feature-volume.md), [time](../reference/api/feature-time.md), [source](../reference/api/feature-source.md), [buffer](../reference/api/feature-buffer.md), [fullscreen](../reference/api/feature-fullscreen.md), [pip](../reference/api/feature-pip.md), [remotePlayback](../reference/api/feature-remote-playback.md), [controls](../reference/api/feature-controls.md), [textTrack](../reference/api/feature-text-tracks.md), [error](../reference/api/feature-error.md), [live](../reference/api/feature-live.md), [metadata](../reference/api/feature-metadata.md); **Skins:** `<live-video-minimal-skin>`, `<live-video-skin>`; **Default media element:** `<video>` |
+
+- [Read about presets](./presets.md)

package/docs/{how-to/use-videojs-with-svelte.md → guides/svelte.md}

@@ -1,4 +1,4 @@
-# Use Video.js with Svelte and SvelteKit
+# Svelte
 
 Add Video.js to a Svelte or SvelteKit app
 
@@ -8,9 +8,7 @@ Follow the [installation guide](./installation.md) first. Keep its `@videojs/htm
 
 If your component needs to react to player state or call a player action, wait until Svelte has mounted and bound `<video-player>`. The React API’s `usePlayer` hook is not part of `@videojs/html`, so bind the element to a variable and subscribe to its store in `onMount`:
 
-svelte
-
-```
+```svelte
 <script lang="ts">
   import type { VideoPlayerElement } from '@videojs/html/video';
   import { onMount } from 'svelte';
@@ -33,9 +31,7 @@ Return the store’s unsubscribe function from `onMount` so Svelte cleans up the
 
 When you need the native event itself, attach a listener to the `<video>`, `<audio>`, or media custom element:
 
-svelte
-
-```
+```svelte
 <script lang="ts">
   function handleLoadedMetadata(event: Event) {
     const media = event.currentTarget as HTMLVideoElement;
@@ -50,9 +46,7 @@ svelte
 
 If a style depends on a Video.js `data-*` state, Svelte may remove its selector because that attribute is not present in your component markup. Wrap these runtime-state selectors in Svelte’s [`:global(...)`](https://svelte.dev/docs/svelte/global-styles#global) modifier:
 
-svelte
-
-```
+```svelte
 <style>
   :global(media-mute-button:not(:defined)) {
     visibility: hidden;
@@ -64,7 +58,7 @@ svelte
 </style>
 ```
 
-`:defined` applies the state style only after the browser loads the element. These selectors matter when you eject a skin or compose controls yourself. Styles cannot reach controls inside a packaged skin; use its CSS custom properties, or [eject the skin](./customize-skins.md#eject-and-edit-a-skin) to change its markup and CSS.
+`:defined` applies the state style only after the browser loads the element. These selectors matter when you add the skin source to your project or compose controls yourself. Styles cannot reach controls inside a packaged skin; use its CSS custom properties, or [add the skin source to your project](./customize-skins.md#style-skin-source) to change its markup and CSS.
 
 ## Pass objects as properties
 
@@ -72,15 +66,11 @@ If you need to pass structured data, such as a Mux source, an HTML attribute wil
 
 The Mux media ships as its own adapter package, so add it to the HTML installation used by this example:
 
-bash
-
-```
+```bash
 pnpm add @videojs/html @videojs/mux-video
 ```
 
-svelte
-
-```
+```svelte
 <script lang="ts">
   import '@videojs/html/video/player';
   import '@videojs/html/video/skin';
@@ -105,4 +95,11 @@ Keep the static element import with the component so `<mux-video>` is registered
 
 If you use server rendering, keep the element imports from the installation guide static. SvelteKit renders the custom-element markup on the server, and the browser upgrades it when the page loads. Put code that needs the bound element or browser APIs in `onMount`, as shown above.
 
-If you intentionally import Video.js later from `onMount`, wait for `customElements.whenDefined('video-player')` before reading its store or calling its methods. If Svelte reports a type error for a custom tag or event, add it to `SvelteHTMLElements` by following Svelte’s [DOM type guidance](https://svelte.dev/docs/svelte/typescript#enhancing-built-in-dom-types).
+If you intentionally import Video.js later from `onMount`, wait for `customElements.whenDefined('video-player')` before reading its store or calling its methods. If Svelte reports a type error for a custom tag or event, add it to `SvelteHTMLElements` by following Svelte’s [DOM type guidance](https://svelte.dev/docs/svelte/typescript#enhancing-built-in-dom-types).
+
+## Related pages
+
+### Guides
+
+- [Installation](./installation-svelte.md): Install Video.js with Svelte in Vite, Astro, or SvelteKit and build a player with HTML custom elements
+- [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions