diff --git a/.prettierignore b/.prettierignore
index 1e2e6c8a18ba..dde2819fadd1 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -25,6 +25,9 @@ millicast/api/
 theolive/api/
 theolive_versioned_docs/*/api/
 
+# Third-party code
+theoplayer/static/theoplayer/*/examples/peak-limiter/lookahead-limiter-*.mjs
+
 # Submodules
 theoplayer/external/
 theoplayer_versioned_docs/*/external/
diff --git a/spellcheck/dictionary.txt b/spellcheck/dictionary.txt
index a7d63598f188..10dcef71e40b 100644
--- a/spellcheck/dictionary.txt
+++ b/spellcheck/dictionary.txt
@@ -1024,3 +1024,5 @@ Zettabyte
 HLG
 HLG-compatible
 UIs
+bookmarklet
+lookahead
diff --git a/theoplayer/examples/_components/ClipApiWithPlaylistDemo.tsx b/theoplayer/examples/_components/ClipApiWithPlaylistDemo.tsx
new file mode 100644
index 000000000000..ad22ca6ee20a
--- /dev/null
+++ b/theoplayer/examples/_components/ClipApiWithPlaylistDemo.tsx
@@ -0,0 +1,140 @@
+import React, { type JSX, useRef, useState } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example, { type ExampleController } from '@site/src/components/Example';
+import styles from '../shared.module.css';
+
+interface PlaylistItem {
+  title: string;
+  poster: string;
+  clip: { startTime: number; endTime: number };
+}
+
+interface PlaylistState {
+  active: number;
+  items: PlaylistItem[];
+}
+
+function formatTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}:${String(Math.floor(seconds % 60)).padStart(2, '0')}`;
+}
+
+export default function ClipApiWithPlaylistDemo(): JSX.Element {
+  const exampleRef = useRef<ExampleController>(null);
+  const [state, setState] = useState<PlaylistState>({ active: 0, items: [] });
+  const [form, setForm] = useState({ src: '', title: 'My clip', startTime: '0', endTime: '30' });
+
+  const startTime = Number(form.startTime);
+  const endTime = Number(form.endTime);
+  const canAdd = form.src.trim() !== '' && Number.isFinite(startTime) && Number.isFinite(endTime) && startTime >= 0 && endTime > startTime;
+
+  function updateForm(key: keyof typeof form, value: string) {
+    setForm((previous) => ({ ...previous, [key]: value }));
+  }
+
+  return (
+    <>
+      <Example
+        ref={exampleRef}
+        src={useBaseUrl('/theoplayer/v11/examples/clip-api-with-playlist/demo.html')}
+        onMessage={(message) => {
+          if (message.type === 'playlist-state') {
+            setState({
+              active: typeof message.active === 'number' ? message.active : 0,
+              items: Array.isArray(message.items) ? (message.items as PlaylistItem[]) : [],
+            });
+          }
+        }}
+      />
+      <div className={styles.panel}>
+        <div className={styles.controls}>
+          <h3 className={styles.panelTitle}>Playlist</h3>
+          <button className="button button--secondary button--sm" onClick={() => exampleRef.current?.postMessage({ type: 'playlist-previous' })}>
+            Previous
+          </button>
+          <button className="button button--secondary button--sm" onClick={() => exampleRef.current?.postMessage({ type: 'playlist-next' })}>
+            Next
+          </button>
+        </div>
+        <ul className={styles.bookmarkList}>
+          {state.items.map((item, index) => (
+            <li key={index}>
+              <button
+                className={`${styles.bookmarkButton} ${index === state.active ? styles.bookmarkButtonActive : ''}`}
+                onClick={() => exampleRef.current?.postMessage({ type: 'playlist-load', index })}
+              >
+                <span className={styles.playlistRow}>
+                  <span className={styles.playlistNumber}>{index + 1}</span>
+                  {item.poster ? <img className={styles.playlistPoster} src={item.poster} alt="" /> : <span className={styles.playlistPoster} />}
+                  <span className={styles.playlistTitle}>
+                    {item.title}
+                    {index === state.active && ' (playing)'}
+                  </span>
+                  <span className={styles.playlistStatus}>
+                    {formatTime(item.clip.startTime)} – {formatTime(item.clip.endTime)}
+                  </span>
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className={styles.panel}>
+        <h3 className={styles.panelTitle}>Add a clip</h3>
+        <div className={styles.formGrid}>
+          <label className={styles.formField}>
+            Stream URL
+            <input
+              className={styles.input}
+              type="url"
+              value={form.src}
+              placeholder="https://example.com/stream.m3u8"
+              onChange={(event) => updateForm('src', event.target.value)}
+            />
+          </label>
+          <label className={styles.formField}>
+            Title
+            <input className={styles.input} value={form.title} onChange={(event) => updateForm('title', event.target.value)} />
+          </label>
+          <label className={styles.formField}>
+            Start (seconds)
+            <input
+              className={styles.input}
+              type="number"
+              min="0"
+              value={form.startTime}
+              onChange={(event) => updateForm('startTime', event.target.value)}
+            />
+          </label>
+          <label className={styles.formField}>
+            End (seconds)
+            <input
+              className={styles.input}
+              type="number"
+              min="0"
+              value={form.endTime}
+              onChange={(event) => updateForm('endTime', event.target.value)}
+            />
+          </label>
+        </div>
+        <div className={styles.formActions}>
+          <button
+            className="button button--primary button--sm"
+            disabled={!canAdd}
+            onClick={() =>
+              exampleRef.current?.postMessage({
+                type: 'playlist-add',
+                src: form.src.trim(),
+                title: form.title.trim() || form.src.trim(),
+                startTime,
+                endTime,
+              })
+            }
+          >
+            Add and play
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/theoplayer/examples/_components/PeakLimiterDemo.tsx b/theoplayer/examples/_components/PeakLimiterDemo.tsx
new file mode 100644
index 000000000000..d70a06d545ac
--- /dev/null
+++ b/theoplayer/examples/_components/PeakLimiterDemo.tsx
@@ -0,0 +1,99 @@
+import React, { type JSX, useRef, useState } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example, { type ExampleController } from '@site/src/components/Example';
+import styles from '../shared.module.css';
+
+export default function PeakLimiterDemo(): JSX.Element {
+  const exampleRef = useRef<ExampleController>(null);
+  const [boost, setBoost] = useState(18);
+  const [ceiling, setCeiling] = useState(-1);
+  const [enabled, setEnabled] = useState(true);
+  const [peak, setPeak] = useState<number | null>(null);
+  const level = peak === null ? 0 : Math.min(100, Math.max(0, (peak + 48) / 54) * 100);
+
+  return (
+    <>
+      <Example
+        ref={exampleRef}
+        src={useBaseUrl('/theoplayer/v11/examples/peak-limiter/demo.html')}
+        onMessage={(message) => {
+          if (message.type === 'limiter-peak') setPeak(message.decibels as number | null);
+        }}
+      />
+      <div className={styles.panel}>
+        <table className={`${styles.readout} ${styles.parameterTable}`}>
+          <tbody>
+            <tr>
+              <th>
+                <label htmlFor="limiter-boost">Boost</label>
+              </th>
+              <td>
+                <input
+                  id="limiter-boost"
+                  type="range"
+                  min={0}
+                  max={24}
+                  step={1}
+                  value={boost}
+                  onChange={(event) => {
+                    const decibels = Number(event.target.value);
+                    setBoost(decibels);
+                    exampleRef.current?.postMessage({ type: 'limiter-boost', decibels });
+                  }}
+                />
+              </td>
+              <td>+{boost} dB</td>
+            </tr>
+            <tr>
+              <th>
+                <label htmlFor="limiter-ceiling">Ceiling</label>
+              </th>
+              <td>
+                <input
+                  id="limiter-ceiling"
+                  type="range"
+                  min={-24}
+                  max={0}
+                  step={1}
+                  value={ceiling}
+                  disabled={!enabled}
+                  onChange={(event) => {
+                    const decibels = Number(event.target.value);
+                    setCeiling(decibels);
+                    exampleRef.current?.postMessage({ type: 'limiter-ceiling', decibels });
+                  }}
+                />
+              </td>
+              <td>{ceiling} dB</td>
+            </tr>
+          </tbody>
+        </table>
+        <div className={styles.controls}>
+          <label>
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={(event) => {
+                setEnabled(event.target.checked);
+                exampleRef.current?.postMessage({ type: 'limiter-enabled', enabled: event.target.checked });
+              }}
+            />
+            Limiter on
+          </label>
+        </div>
+        <div className={styles.rangeRow}>
+          <div className={styles.rangeLabel}>
+            <span>Output peak</span>
+            <code>{peak === null ? '-∞ dB' : `${peak.toFixed(1)} dB`}</code>
+          </div>
+          <div className={styles.rangeBar}>
+            <div
+              className={styles.rangeSegment}
+              style={{ width: `${level}%`, background: peak !== null && peak > 0 ? 'var(--ifm-color-danger)' : 'var(--ifm-color-success)' }}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/theoplayer/examples/_components/VideoFitDemo.tsx b/theoplayer/examples/_components/VideoFitDemo.tsx
new file mode 100644
index 000000000000..9618a065f837
--- /dev/null
+++ b/theoplayer/examples/_components/VideoFitDemo.tsx
@@ -0,0 +1,42 @@
+import React, { type CSSProperties, type JSX, useRef, useState } from 'react';
+import clsx from 'clsx';
+import Example, { type ExampleController } from '@site/src/components/Example';
+import styles from '../shared.module.css';
+
+const fits = ['contain', 'cover', 'fill'] as const;
+
+interface VideoFitDemoProps {
+  src: string;
+  style?: CSSProperties;
+  exposeGlobals?: boolean;
+}
+
+export default function VideoFitDemo({ src, style, exposeGlobals }: VideoFitDemoProps): JSX.Element {
+  const exampleRef = useRef<ExampleController>(null);
+  const [fit, setFit] = useState<(typeof fits)[number]>('contain');
+  return (
+    <>
+      <Example ref={exampleRef} src={src} style={style} exposeGlobals={exposeGlobals} />
+      <div className={styles.panel}>
+        <div className={styles.controls}>
+          <div className="button-group" role="group" aria-label="Video fit">
+            {fits.map((value) => (
+              <button
+                key={value}
+                type="button"
+                aria-pressed={value === fit}
+                className={clsx('button button--sm', value === fit ? 'button--primary' : 'button--secondary')}
+                onClick={() => {
+                  setFit(value);
+                  exampleRef.current?.postMessage({ type: 'video-fit', fit: value });
+                }}
+              >
+                {value}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/theoplayer/examples/_components/WebAudioDemo.tsx b/theoplayer/examples/_components/WebAudioDemo.tsx
new file mode 100644
index 000000000000..340ea7b061ef
--- /dev/null
+++ b/theoplayer/examples/_components/WebAudioDemo.tsx
@@ -0,0 +1,79 @@
+import React, { type JSX, useRef, useState } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example, { type ExampleController } from '@site/src/components/Example';
+import styles from '../shared.module.css';
+
+const params = [
+  { name: 'pan', label: 'Pan', min: -1, max: 1, step: 0.05, value: 0, format: (value: number) => value.toFixed(2) },
+  { name: 'bass', label: 'Bass', min: -12, max: 12, step: 1, value: 0, format: (value: number) => `${value} dB` },
+  { name: 'mid', label: 'Mid', min: -12, max: 12, step: 1, value: 0, format: (value: number) => `${value} dB` },
+  { name: 'treble', label: 'Treble', min: -12, max: 12, step: 1, value: 0, format: (value: number) => `${value} dB` },
+  { name: 'volume', label: 'Volume', min: 0, max: 1, step: 0.01, value: 1, format: (value: number) => `${Math.round(value * 100)}%` },
+] as const;
+
+type ParamName = (typeof params)[number]['name'];
+
+const defaults = Object.fromEntries(params.map(({ name, value }) => [name, value])) as Record<ParamName, number>;
+
+export default function WebAudioDemo(): JSX.Element {
+  const exampleRef = useRef<ExampleController>(null);
+  const [values, setValues] = useState(defaults);
+  const [bypass, setBypass] = useState(false);
+
+  function setParam(name: ParamName, value: number) {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    exampleRef.current?.postMessage({ type: 'web-audio-param', name, value });
+  }
+
+  return (
+    <>
+      <Example ref={exampleRef} src={useBaseUrl('/theoplayer/v11/examples/web-audio/demo.html')} style={{ aspectRatio: '16 / 10.9' }} />
+      <div className={styles.panel}>
+        <p className={styles.hint}>Press play, then move the sliders. The audio context starts after you interact with the player.</p>
+        <table className={`${styles.readout} ${styles.parameterTable}`}>
+          <tbody>
+            {params.map(({ name, label, min, max, step, format }) => (
+              <tr key={name}>
+                <th>
+                  <label htmlFor={`web-audio-${name}`}>{label}</label>
+                </th>
+                <td>
+                  <input
+                    id={`web-audio-${name}`}
+                    type="range"
+                    min={min}
+                    max={max}
+                    step={step}
+                    value={values[name]}
+                    onChange={(event) => setParam(name, Number(event.target.value))}
+                  />
+                </td>
+                <td>{format(values[name])}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className={styles.controls}>
+          <label>
+            <input
+              type="checkbox"
+              checked={bypass}
+              onChange={(event) => {
+                setBypass(event.target.checked);
+                exampleRef.current?.postMessage({ type: 'web-audio-bypass', bypass: event.target.checked });
+              }}
+            />
+            Bypass effects
+          </label>
+          <button
+            type="button"
+            className="button button--sm button--secondary"
+            onClick={() => params.forEach(({ name, value }) => setParam(name, value))}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/theoplayer/examples/_components/YospaceDemo.tsx b/theoplayer/examples/_components/YospaceDemo.tsx
new file mode 100644
index 000000000000..c5e482779058
--- /dev/null
+++ b/theoplayer/examples/_components/YospaceDemo.tsx
@@ -0,0 +1,83 @@
+import React, { type JSX, useRef, useState } from 'react';
+import clsx from 'clsx';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example, { type ExampleController } from '@site/src/components/Example';
+import styles from '../shared.module.css';
+
+const streams = [
+  { id: 'hls', label: 'HLS live' },
+  { id: 'hlsPause', label: 'HLS live-pause' },
+  { id: 'dash', label: 'DASH live-pause' },
+] as const;
+
+interface EventEntry {
+  time: string;
+  event: string;
+  details: string;
+}
+
+interface AdBreak {
+  ads: number;
+  timeOffset: number;
+}
+
+export default function YospaceDemo(): JSX.Element {
+  const exampleRef = useRef<ExampleController>(null);
+  const [stream, setStream] = useState<string>('hls');
+  const [loading, setLoading] = useState(true);
+  const [adBreak, setAdBreak] = useState<AdBreak | null>(null);
+  const [events, setEvents] = useState<EventEntry[]>([]);
+
+  return (
+    <>
+      <Example
+        ref={exampleRef}
+        src={useBaseUrl('/theoplayer/v11/examples/yospace/demo.html')}
+        onMessage={(message) => {
+          if (message.type === 'yospace-stream') {
+            setStream(message.stream as string);
+            setLoading(message.loading as boolean);
+          } else if (message.type === 'yospace-adbreak') {
+            setAdBreak(message.adBreak as AdBreak | null);
+          } else if (message.type === 'yospace-events') {
+            setEvents(message.events as EventEntry[]);
+          }
+        }}
+      />
+      <div className={styles.panel}>
+        <div className={styles.controls}>
+          <div className="button-group" role="group" aria-label="Yospace stream">
+            {streams.map(({ id, label }) => (
+              <button
+                key={id}
+                type="button"
+                aria-pressed={id === stream}
+                disabled={loading}
+                className={clsx('button button--sm', id === stream ? 'button--primary' : 'button--secondary')}
+                onClick={() => exampleRef.current?.postMessage({ type: 'yospace-stream', stream: id })}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <p className={styles.panelTitle} aria-live="polite">
+          Current ad break: {adBreak ? `${adBreak.ads} ad(s), at ${adBreak.timeOffset} s` : 'none'}
+        </p>
+        <div className={`${styles.eventLog} ${styles.readoutScroll}`} aria-label="Ad event log">
+          {events.length === 0 ? (
+            <span className={styles.eventLogEmpty}>No events reported yet.</span>
+          ) : (
+            events.map((entry, index) => (
+              <div key={`${entry.time}-${index}`} className={styles.eventLogRow}>
+                <span>{entry.time}</span>
+                <span>{entry.event}</span>
+                <span>{entry.details}</span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/theoplayer/examples/ads/04-yospace-ssai.mdx b/theoplayer/examples/ads/04-yospace-ssai.mdx
new file mode 100644
index 000000000000..82f592b013b7
--- /dev/null
+++ b/theoplayer/examples/ads/04-yospace-ssai.mdx
@@ -0,0 +1,50 @@
+---
+sidebar_custom_props: { icon: '🧵' }
+description: Play Yospace server-side ad insertion (SSAI) streams with the Yospace connector.
+---
+
+# Yospace SSAI
+
+Play a Yospace stream with server-side ad insertion (SSAI) and follow its ad breaks in the event log.
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/yospace/demo.html';
+import YospaceDemo from '../_components/YospaceDemo';
+
+<YospaceDemo />
+
+With SSAI, the Yospace server stitches the ads into the stream itself, so the player plays one continuous stream.
+The Yospace Ad Management SDK reads the ad information that comes with the stream, and the [Yospace connector](https://github.com/THEOplayer/web-connectors/tree/main/yospace)
+reports the ad breaks and ads through the player's [`Ads`](pathname:///theoplayer/v11/api-reference/web/interfaces/Ads.html) API.
+This example uses Yospace validation streams, which have a short ad break at regular intervals.
+
+Load the Yospace Ad Management SDK (3.10.0 or newer) and the connector, then create the connector and set up a Yospace session.
+The connector creates the session and sets the stream it gets back from Yospace as the player source.
+
+```js
+const yospace = new THEOplayerYospaceConnector.YospaceConnector(player);
+await yospace.setupYospaceSession({
+  sources: [
+    {
+      src: 'https://csm-e-sdk-validation-eb.bln1.yospace.com/csm/extlive/yosdk02,hls-ts-pre.m3u8?yo.av=5',
+      ssai: {
+        integration: 'yospace',
+        streamType: 'live', // 'vod', 'live', 'livepause' or 'nonlinear'
+      },
+    },
+  ],
+});
+
+player.ads.addEventListener('adbreakbegin', (event) => {
+  console.log('Ad break with', event.adBreak.ads.length, 'ad(s)');
+});
+```
+
+The Yospace Ad Management SDK isn't available on npm: get it from Yospace and host it yourself.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/playback/08-clip-api-with-playlist.mdx b/theoplayer/examples/playback/08-clip-api-with-playlist.mdx
new file mode 100644
index 000000000000..269793432fd2
--- /dev/null
+++ b/theoplayer/examples/playback/08-clip-api-with-playlist.mdx
@@ -0,0 +1,42 @@
+---
+sidebar_custom_props: { icon: '✂️' }
+description: Play only a part of each item in a playlist with the Clip API.
+---
+
+# Clip API with playlist
+
+Play only a part of each video in a playlist with the Clip API, and continue with the next item when a clip ends.
+
+import CodeBlock from '@theme/CodeBlock';
+import ClipApiWithPlaylistDemo from '../_components/ClipApiWithPlaylistDemo';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/clip-api-with-playlist/demo.html';
+
+<ClipApiWithPlaylistDemo />
+
+Set `player.clip.startTime` and `player.clip.endTime` (in seconds) to limit playback to a part of the stream.
+The player then starts at the clip's start, limits seeking to the clip, and fires `ended` at the clip's end.
+
+Changing the source resets the clip to the whole stream. To clip each playlist item, apply its clip again on `durationchange`, after you set the new source:
+
+```js
+player.addEventListener('durationchange', () => {
+  player.clip.startTime = playlist[active].clip.startTime;
+  player.clip.endTime = playlist[active].clip.endTime;
+});
+
+player.addEventListener('ended', () => {
+  active++;
+  player.autoplay = true;
+  player.source = playlist[active].source;
+});
+```
+
+See the [Clipping](../../how-to-guides/web/miscellaneous/clipping.mdx) guide and the [`Clip` API](pathname:///theoplayer/v11/api-reference/web/interfaces/Clip.html).
+To build a playlist without clips, see the [Playlist and caching](07-playlist-and-caching.mdx) example.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/playback/09-web-audio-api.mdx b/theoplayer/examples/playback/09-web-audio-api.mdx
new file mode 100644
index 000000000000..248aca496b42
--- /dev/null
+++ b/theoplayer/examples/playback/09-web-audio-api.mdx
@@ -0,0 +1,43 @@
+---
+sidebar_custom_props: { icon: '🎚️' }
+description: Route the player's audio through the Web Audio API to pan, equalize and visualize it.
+---
+
+# Web Audio API
+
+Route the player's audio through the Web Audio API to pan it, change its tone with an equalizer, and draw its spectrum.
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/web-audio/demo.html';
+import WebAudioDemo from '../_components/WebAudioDemo';
+
+<WebAudioDemo />
+
+`player.audio.createAudioSourceNode(context)` returns an audio node with the player's audio. Connect it to other nodes of the same [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext).
+Once the player's audio goes through the audio graph, you only hear it if the graph ends at `context.destination`.
+
+```js
+const context = new AudioContext();
+const source = player.audio.createAudioSourceNode(context);
+const panner = new StereoPannerNode(context);
+const bass = new BiquadFilterNode(context, { type: 'lowshelf', frequency: 250 });
+const volume = new GainNode(context);
+const analyser = new AnalyserNode(context, { fftSize: 256 });
+
+source.connect(panner).connect(bass).connect(volume).connect(analyser).connect(context.destination);
+
+// Change values smoothly to avoid audible clicks.
+bass.gain.setTargetAtTime(6, context.currentTime, 0.02);
+```
+
+Browsers start an `AudioContext` in the `suspended` state until the viewer interacts with the page, and the player is silent while the context is suspended.
+Call `context.resume()` when playback starts or after a click or key press, as this example does.
+
+See the [`Audio` API](pathname:///theoplayer/v11/api-reference/web/interfaces/Audio.html) and the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) documentation on MDN.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/playback/10-peak-limiter.mdx b/theoplayer/examples/playback/10-peak-limiter.mdx
new file mode 100644
index 000000000000..df38d5114222
--- /dev/null
+++ b/theoplayer/examples/playback/10-peak-limiter.mdx
@@ -0,0 +1,44 @@
+---
+sidebar_custom_props: { icon: '🔊' }
+description: Boost the player's audio without clipping by routing it through a lookahead peak limiter.
+---
+
+# Peak limiter
+
+Make quiet audio louder without clipping: boost the player's audio and keep its peaks under a ceiling with a lookahead limiter.
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/peak-limiter/demo.html';
+import PeakLimiterDemo from '../_components/PeakLimiterDemo';
+
+<PeakLimiterDemo />
+
+Turn the limiter off to hear the boosted audio clip: in loud scenes, the output peak goes above 0 dB and the meter turns red.
+
+The Web Audio API has no built-in peak limiter. Its `DynamicsCompressorNode` adds makeup gain automatically, so it can't guarantee that peaks stay under a ceiling.
+This example uses [`@synthlet/lookahead-limiter`](https://www.npmjs.com/package/@synthlet/lookahead-limiter), an open source (MIT) limiter that runs in an `AudioWorklet`.
+It looks 2 ms ahead, so it lowers the gain before a peak arrives, and it also catches peaks between samples (true peaks).
+
+```js
+import { registerLookaheadLimiterWorklet, LookaheadLimiter } from '@synthlet/lookahead-limiter';
+
+const context = new AudioContext();
+await registerLookaheadLimiterWorklet(context);
+
+const source = player.audio.createAudioSourceNode(context);
+const limiter = LookaheadLimiter(context, {
+  gain: 12, // boost in dB, applied before limiting
+  threshold: -1, // ceiling in dB
+});
+source.connect(limiter).connect(context.destination);
+```
+
+The limiter delays the audio by about 2 ms. Browsers start an `AudioContext` in the `suspended` state until the viewer interacts with the page, so call `context.resume()` when playback starts.
+See the [Web Audio API](./09-web-audio-api.mdx) example for more about routing the player's audio.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/ui/09-video-fit.mdx b/theoplayer/examples/ui/09-video-fit.mdx
new file mode 100644
index 000000000000..3ee737627f9c
--- /dev/null
+++ b/theoplayer/examples/ui/09-video-fit.mdx
@@ -0,0 +1,59 @@
+---
+sidebar_custom_props: { icon: '🖼️' }
+description: Change how the video fits inside the player with contain, cover or fill.
+---
+
+# Video fit
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/video-fit/demo.html';
+import defaultUiSource from '!!raw-loader!../../static/theoplayer/v11/examples/video-fit/default-ui.html';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import VideoFitDemo from '../_components/VideoFitDemo';
+
+When the player and the video have different aspect ratios, you can choose how the video fits inside the player.
+These examples use a 21:9 player for a 16:9 video. Switch between the values of the CSS
+[`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property to see the difference:
+
+- `contain` (default) shows the whole video, with black bars on the sides.
+- `cover` fills the player, cutting off the top and bottom of the video.
+- `fill` fills the player by stretching the video.
+
+## Open Video UI
+
+<VideoFitDemo src={useBaseUrl('/theoplayer/v11/examples/video-fit/demo.html')} style={{ aspectRatio: '21 / 9.1' }} />
+
+Set the `--theoplayer-video-object-fit` CSS custom property on the UI. `--theoplayer-aspect-ratio` sets the shape of the player itself.
+
+```css
+theoplayer-default-ui {
+  --theoplayer-aspect-ratio: 21 / 9;
+  --theoplayer-video-object-fit: cover;
+}
+```
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
+
+## Default UI
+
+<VideoFitDemo src={useBaseUrl('/theoplayer/v11/examples/video-fit/default-ui.html')} style={{ aspectRatio: '21 / 9.1' }} exposeGlobals={false} />
+
+In the [Default UI](../../ui/web/default-ui/index.mdx), set `object-fit` on the `<video>` elements of the player.
+
+```css
+.theoplayer-skin video {
+  object-fit: cover;
+}
+```
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="default-ui.html" showLineNumbers>
+    {defaultUiSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/ui/10-debug-display.mdx b/theoplayer/examples/ui/10-debug-display.mdx
new file mode 100644
index 000000000000..9bbee702b5a0
--- /dev/null
+++ b/theoplayer/examples/ui/10-debug-display.mdx
@@ -0,0 +1,58 @@
+---
+sidebar_custom_props: { icon: '🐞' }
+description: Show playback diagnostics in an overlay with the Open Video UI debug display.
+---
+
+# Debug display
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/debug-display/demo.html';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example from '@site/src/components/Example';
+
+<Example src={useBaseUrl('/theoplayer/v11/examples/debug-display/demo.html')} />
+
+The debug display is an overlay panel in Open Video UI that shows playback diagnostics, such as the current source,
+the playing quality, buffer health and live latency. Start playback and click the debug button in the control bar to show or hide it.
+
+The debug display is a separate entry point of `@theoplayer/web-ui`, available from version 2.6.0 and only as an ES module.
+Import it next to the main Open Video UI module:
+
+```js
+import '@theoplayer/web-ui';
+import '@theoplayer/web-ui/debug';
+```
+
+Then place a `<theoplayer-debug-display>` in the `overlay` slot, and optionally a `<theoplayer-debug-button>` in the control bar to toggle it.
+Leave out the `hidden` attribute to show the panel from the start.
+
+```html
+<theoplayer-default-ui configuration="..." source="...">
+  <theoplayer-debug-display slot="overlay" hidden></theoplayer-debug-display>
+  <theoplayer-debug-button slot="bottom-control-bar"></theoplayer-debug-button>
+</theoplayer-default-ui>
+```
+
+This example loads the packages from a CDN with an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap).
+In your application, install `@theoplayer/web-ui` from npm and bundle it instead.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
+
+## Bookmarklet
+
+To inspect an Open Video UI player on any website without changing its code, create a bookmark with the following URL:
+
+```text
+javascript:(()=>{const s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@theoplayer/web-ui@2/dist/THEOplayerUI.debug.bookmarklet.js';document.head.append(s)})()
+```
+
+Click the bookmark on a page with an Open Video UI player to show the debug display, and click it again to hide it.
+The bookmarklet doesn't work on pages whose [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) blocks scripts from other origins,
+or on players inside a cross-origin iframe.
+
+See the [debug display guide](../../external/web-ui/docs/guides/debug-display.md) of Open Video UI for more details.
diff --git a/theoplayer/examples/ui/11-chromeless-ui.mdx b/theoplayer/examples/ui/11-chromeless-ui.mdx
new file mode 100644
index 000000000000..849ada6c874a
--- /dev/null
+++ b/theoplayer/examples/ui/11-chromeless-ui.mdx
@@ -0,0 +1,53 @@
+---
+sidebar_custom_props: { icon: '🧩' }
+description: Build your own player controls from scratch on top of a ChromelessPlayer.
+---
+
+# Chromeless UI
+
+Build player controls from scratch with plain HTML, CSS and JavaScript on top of a `ChromelessPlayer`.
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/chromeless-ui/demo.html';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example from '@site/src/components/Example';
+
+<Example src={useBaseUrl('/theoplayer/v11/examples/chromeless-ui/demo.html')} />
+
+A [`ChromelessPlayer`](pathname:///theoplayer/v11/api-reference/web/classes/ChromelessPlayer.html) plays the video and renders subtitles, but has no controls.
+This example doesn't load a UI library: every control is a regular HTML element that calls the player API and listens to player events to stay up to date.
+
+| Control           | Player API                                                                                     |
+| ----------------- | ---------------------------------------------------------------------------------------------- |
+| Play and pause    | `play()`, `pause()`, `paused`, and the `play`, `pause` and `ended` events                      |
+| Scrubber and time | `currentTime`, `duration`, `buffered`, and the `timeupdate` and `progress` events              |
+| Buffering spinner | the `waiting` and `playing` events                                                             |
+| Subtitles         | `textTracks`, with `mode = 'showing'` for the selected track                                   |
+| Audio             | `audioTracks`, with `enabled = true` for the selected track                                    |
+| Mute              | `muted` and the `volumechange` event                                                           |
+| Fullscreen        | `requestFullscreen()` on the container, `presentation.requestMode('fullscreen')` as a fallback |
+
+```js
+const container = document.querySelector('.player');
+const player = new THEOplayer.ChromelessPlayer(container, {
+  libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
+  license: 'your_license_here',
+});
+
+playButton.addEventListener('click', () => (player.paused ? player.play() : player.pause()));
+player.addEventListener(['play', 'pause'], () => {
+  playButton.setAttribute('aria-label', player.paused ? 'Play' : 'Pause');
+});
+```
+
+The controls are placed inside the player's container, so they stay visible in fullscreen.
+They hide after 3 seconds without activity while playing. The player can also be used with the keyboard: Tab moves between the controls, Space or Enter plays and pauses, and the left and right arrows skip 10 seconds.
+
+See [Getting started with a chromeless UI](../../ui/web/build-chromeless-ui.mdx) for a step-by-step guide.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/examples/ui/12-up-next.mdx b/theoplayer/examples/ui/12-up-next.mdx
new file mode 100644
index 000000000000..59a80586ef0f
--- /dev/null
+++ b/theoplayer/examples/ui/12-up-next.mdx
@@ -0,0 +1,80 @@
+---
+sidebar_custom_props: { icon: '⏭️' }
+description: Announce the next video near the end of the current one, and open its page when the video ends.
+---
+
+# Up Next
+
+import CodeBlock from '@theme/CodeBlock';
+import demoSource from '!!raw-loader!../../static/theoplayer/v11/examples/up-next/demo.html';
+import defaultUiSource from '!!raw-loader!../../static/theoplayer/v11/examples/up-next/default-ui.html';
+import nextSource from '!!raw-loader!../../static/theoplayer/v11/examples/up-next/next.html';
+import nextDefaultUiSource from '!!raw-loader!../../static/theoplayer/v11/examples/up-next/next-default-ui.html';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Example from '@site/src/components/Example';
+
+Near the end of a video, show a small bar in the bottom right corner that announces the next video.
+When the video ends, an Up Next screen counts down and then opens the page of the next video, unless the viewer clicks the play button first.
+To try it, seek to the last two minutes of the video.
+
+:::info
+
+Up Next takes viewers to a different web page. To switch to another source in the same player, see the [Playlist and caching](../playback/07-playlist-and-caching.mdx) example.
+
+:::
+
+## Open Video UI
+
+<Example src={useBaseUrl('/theoplayer/v11/examples/up-next/demo.html')} />
+
+Open Video UI doesn't have a built-in Up Next feature, so this example builds it in the `overlay` slot of the UI:
+
+- On `timeupdate`, the bar slides in when the remaining time is less than 106 seconds. Clicking it opens the next page, and the × button closes it.
+- On `ended`, the Up Next screen shows the poster of the next video and starts a 10 second countdown around the play button.
+- Seeking or playing again cancels the countdown.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="demo.html" showLineNumbers>
+    {demoSource}
+  </CodeBlock>
+</details>
+
+## Default UI
+
+<Example src={useBaseUrl('/theoplayer/v11/examples/up-next/default-ui.html')} exposeGlobals={false} />
+
+The [Default UI](../../ui/web/default-ui/index.mdx) has a built-in [Up Next](../../how-to-guides/web/miscellaneous/up-next.mdx) feature.
+Set `player.upnext.source`, with the page to open in `link`:
+
+```js
+player.upnext.source = {
+  title: 'Big Buck Bunny',
+  image: 'https://cdn.theoplayer.com/video/posters/big_buck_bunny.jpg',
+  duration: '9:56',
+  link: 'next-default-ui.html',
+};
+player.upnext.bar.offset = 106;
+player.upnext.panel.countdownDuration = 10;
+```
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="default-ui.html" showLineNumbers>
+    {defaultUiSource}
+  </CodeBlock>
+</details>
+
+## Next pages
+
+Each example opens a page with the same UI, which plays the next video.
+
+<details>
+  <summary>Code</summary>
+  <CodeBlock language="html" title="next.html (Open Video UI)" showLineNumbers>
+    {nextSource}
+  </CodeBlock>
+  <CodeBlock language="html" title="next-default-ui.html (Default UI)" showLineNumbers>
+    {nextDefaultUiSource}
+  </CodeBlock>
+</details>
diff --git a/theoplayer/faq/10-is-it-possible-to-see-360-picture.md b/theoplayer/faq/10-is-it-possible-to-see-360-picture.md
index 65377ef577dd..c437d37048fc 100644
--- a/theoplayer/faq/10-is-it-possible-to-see-360-picture.md
+++ b/theoplayer/faq/10-is-it-possible-to-see-360-picture.md
@@ -3,3 +3,7 @@
 This question is asked by those users and developers that are wondering if the player 360 degree functionality can be used to view also images.
 
 No, this cannot be done. The player is intended for video sources, so an image as input is not officially supported, which is also true for 3D images.
+
+## Resources
+
+- [Online demo: VR video](../examples/streaming/06-vr.mdx)
diff --git a/theoplayer/faq/21-why-does-currentime-seem-to-be-off.md b/theoplayer/faq/21-why-does-currentime-seem-to-be-off.md
index fac5e4bbffca..83c25b03ff56 100644
--- a/theoplayer/faq/21-why-does-currentime-seem-to-be-off.md
+++ b/theoplayer/faq/21-why-does-currentime-seem-to-be-off.md
@@ -58,3 +58,7 @@ function AbsoluteTimeline(player) {
 
 var timeline = AbsoluteTimeline(player);
 ```
+
+## Resources
+
+- [Online demo: keeping track of time](../examples/playback/03-keeping-track-of-time.mdx)
diff --git a/theoplayer/faq/36-can-clipping-be-used-in-a-playlist.md b/theoplayer/faq/36-can-clipping-be-used-in-a-playlist.md
index 64ca526db403..90bcabc4b69d 100644
--- a/theoplayer/faq/36-can-clipping-be-used-in-a-playlist.md
+++ b/theoplayer/faq/36-can-clipping-be-used-in-a-playlist.md
@@ -89,6 +89,6 @@ The following resources provide more information:
 
 API reference - [Clip API](pathname:///theoplayer/v11/api-reference/web/interfaces/Clip.html)
 
-{/* https://demo.theoplayer.com/playlist: Demo page - Playlist */}
+Clip API with playlist - [Online demo](../examples/playback/08-clip-api-with-playlist.mdx)
 
 Clipping - [How-to guide](../how-to-guides/web/miscellaneous/clipping.mdx)
diff --git a/theoplayer/faq/37-can-timeline-thumbnails-be-made-available-before-playback-start.md b/theoplayer/faq/37-can-timeline-thumbnails-be-made-available-before-playback-start.md
index 520b83c1fd00..527e79ce6c5e 100644
--- a/theoplayer/faq/37-can-timeline-thumbnails-be-made-available-before-playback-start.md
+++ b/theoplayer/faq/37-can-timeline-thumbnails-be-made-available-before-playback-start.md
@@ -13,3 +13,4 @@ The following resources provide more information:
 - [Preloading - How to](../how-to-guides/web/miscellaneous/preloading.mdx)
 - [What are the benefits of preloading?](38-what-are-the-benefits-of-preloading.md)
 - [PreloadType API reference](pathname:///theoplayer/v11/api-reference/web/types/PreloadType.html)
+- [Online demo: preview thumbnails](../examples/ui/06-preview-thumbnails.mdx)
diff --git a/theoplayer/faq/38-what-are-the-benefits-of-preloading.md b/theoplayer/faq/38-what-are-the-benefits-of-preloading.md
index cc2aa7e68795..0467b1ff70e2 100644
--- a/theoplayer/faq/38-what-are-the-benefits-of-preloading.md
+++ b/theoplayer/faq/38-what-are-the-benefits-of-preloading.md
@@ -17,3 +17,4 @@ The following resources provide more information:
 - [API reference: preloading](pathname:///theoplayer/v11/api-reference/web/types/PreloadType.html)
 - [API reference: Cache API](pathname:///theoplayer/v11/api-reference/web/interfaces/Cache.html)
 - [API reference: Canvas API](pathname:///theoplayer/v11/api-reference/web/interfaces/Canvas.html)
+- [Online demo: preload](../examples/playback/06-preload.mdx)
diff --git a/theoplayer/faq/48-prevent-up-next-from-redirecting.md b/theoplayer/faq/48-prevent-up-next-from-redirecting.md
index c99c0b9746e7..11b425c880ad 100644
--- a/theoplayer/faq/48-prevent-up-next-from-redirecting.md
+++ b/theoplayer/faq/48-prevent-up-next-from-redirecting.md
@@ -11,4 +11,4 @@ This is done by setting the value of the countdownDuration property of your UpNe
 The following resources provide more information:
 
 - [API reference](pathname:///theoplayer/v11/api-reference/web/interfaces/UpNextPanel.html#countdownDuration)
-- [Demo page – Up Next](https://www.theoplayer.com/theoplayer-demo-up-next)
+- [Demo page – Up Next](../examples/ui/12-up-next.mdx)
diff --git a/theoplayer/faq/49-preload-vod-content-when-pre-roll-is-playing.md b/theoplayer/faq/49-preload-vod-content-when-pre-roll-is-playing.md
index dabdad9b30cb..b1e58388d133 100644
--- a/theoplayer/faq/49-preload-vod-content-when-pre-roll-is-playing.md
+++ b/theoplayer/faq/49-preload-vod-content-when-pre-roll-is-playing.md
@@ -9,6 +9,6 @@ For more details regarding preload and how to implement it, please visit the res
 The following resources provide more information:
 
 - [Preloading - how to](../how-to-guides/web/miscellaneous/preloading.mdx)
-- [Demo page](https://demo.theoplayer.com/preloading-vod)
+- [Demo page](../examples/playback/06-preload.mdx)
 - [What are the benefits of preloading](38-what-are-the-benefits-of-preloading.md)
 - [API reference - PreloadType](pathname:///theoplayer/v11/api-reference/web/types/PreloadType.html)
diff --git a/theoplayer/faq/52-is-it-a-problem-if-viewer-pauses-live-stream-longer-than-dvr-window.md b/theoplayer/faq/52-is-it-a-problem-if-viewer-pauses-live-stream-longer-than-dvr-window.md
index 8bf8ce3b73ff..ebac7b5294ee 100644
--- a/theoplayer/faq/52-is-it-a-problem-if-viewer-pauses-live-stream-longer-than-dvr-window.md
+++ b/theoplayer/faq/52-is-it-a-problem-if-viewer-pauses-live-stream-longer-than-dvr-window.md
@@ -13,3 +13,7 @@ player.addEventListener('play', () => {
   player.currentTime = player.seekable.end() - player.currentTime > 60 ? player.seekable.end() - 30 : player.currentTime;
 });
 ```
+
+## Resources
+
+- [Online demo: DVR](../examples/streaming/03-dvr.mdx)
diff --git a/theoplayer/faq/59-how-can-i-distribute-4k-content.md b/theoplayer/faq/59-how-can-i-distribute-4k-content.md
index 197ffaeadd73..97e824855949 100644
--- a/theoplayer/faq/59-how-can-i-distribute-4k-content.md
+++ b/theoplayer/faq/59-how-can-i-distribute-4k-content.md
@@ -59,3 +59,7 @@ For example, on Desktop Chrome, video players leverage the [Media Source Extensi
 That being said, a video player might still be the one to blame when your viewers aren't seeing the beautiful 4K representation of your stream. Your video player should be able to correctly parse, extract and leverage the 4K stream from your HLS or MPEG-DASH manifest when your 4K representation can be applied. This functionality might not be implemented in your video player.
 
 THEOplayer supports 4K streaming out of the box. For specific devices, specific configuration recommendations can apply in order to achieve 4K streaming efficiently.
+
+## Resources
+
+- [Online demo: 4K streaming](../examples/streaming/01-4k-streaming.mdx)
diff --git a/theoplayer/getting-started/01-sdks/01-web/00-getting-started.mdx b/theoplayer/getting-started/01-sdks/01-web/00-getting-started.mdx
index 3a48881f82af..3d66b720be1b 100644
--- a/theoplayer/getting-started/01-sdks/01-web/00-getting-started.mdx
+++ b/theoplayer/getting-started/01-sdks/01-web/00-getting-started.mdx
@@ -620,5 +620,6 @@ var player = new THEOplayer.Player(element, {
 Ready to learn more?
 
 - Go through our [how-to guides](../../../how-to-guides/web/index.mdx) to learn about [UI customization](../../../ui/web/index.mdx), [advertising](../../../how-to-guides/web/ads/introduction.mdx), [DRM](../../../how-to-guides/web/drm/introduction.mdx), [casting](../../../how-to-guides/web/cast/chromecast/introduction.mdx), [analytics](../../../how-to-guides/web/analytics/introduction.mdx) and other topics.
+- Browse our [examples](../../../examples/index.mdx) to see the Web SDK features in action.
 - Check out our [API reference](pathname:///theoplayer/v11/api-reference/web/classes/ChromelessPlayer.html).
 - Try out samples from our [GitHub](https://github.com/THEOplayer).
diff --git a/theoplayer/how-to-guides/web/ads/google-dai.mdx b/theoplayer/how-to-guides/web/ads/google-dai.mdx
index 4b774f5d18d8..ba9c4552f060 100644
--- a/theoplayer/how-to-guides/web/ads/google-dai.mdx
+++ b/theoplayer/how-to-guides/web/ads/google-dai.mdx
@@ -126,3 +126,4 @@ player.source = {
 - [THEOplayer Getting Started Guide](../../../getting-started/01-sdks/01-web/00-getting-started.mdx)
 - [Google DAI website](https://developers.google.com/interactive-media-ads)
 - [Google DAI HTML5 Reference](https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai)
+- [Online demo](../../../examples/ads/01-google-dai.mdx)
diff --git a/theoplayer/how-to-guides/web/ads/yospace.mdx b/theoplayer/how-to-guides/web/ads/yospace.mdx
index 7ca1b9e5f2f2..cf41c5e4472f 100644
--- a/theoplayer/how-to-guides/web/ads/yospace.mdx
+++ b/theoplayer/how-to-guides/web/ads/yospace.mdx
@@ -25,3 +25,4 @@ Please refer to [this](/theoplayer/connectors/web/yospace/) section to learn all
 
 - [Getting started on Web](../../../getting-started/01-sdks/01-web/00-getting-started.mdx)
 - [Yospace website](https://www.yospace.com/)
+- [Online demo](../../../examples/ads/04-yospace-ssai.mdx)
diff --git a/theoplayer/how-to-guides/web/analytics/conviva.mdx b/theoplayer/how-to-guides/web/analytics/conviva.mdx
index 24dd24b70178..586a5c2a9e5f 100644
--- a/theoplayer/how-to-guides/web/analytics/conviva.mdx
+++ b/theoplayer/how-to-guides/web/analytics/conviva.mdx
@@ -19,4 +19,6 @@ If you have a Yospace SSAI stream and want to report ad related events to Conviv
 
 ## Resources
 
+- [Online demo](../../../examples/analytics/01-conviva.mdx)
+
 <Resources />
diff --git a/theoplayer/how-to-guides/web/cast/airplay/introduction.mdx b/theoplayer/how-to-guides/web/cast/airplay/introduction.mdx
index 2fafdebcaaba..92848a809841 100644
--- a/theoplayer/how-to-guides/web/cast/airplay/introduction.mdx
+++ b/theoplayer/how-to-guides/web/cast/airplay/introduction.mdx
@@ -71,3 +71,7 @@ Safari only exposes limited information.
 ## Remarks
 
 - [Chromecast](../chromecast/introduction.mdx) and AirPlay are comparable technologies.
+
+## Resources
+
+- [Online demo](../../../../examples/casting/01-airplay.mdx)
diff --git a/theoplayer/how-to-guides/web/cast/chromecast/introduction.mdx b/theoplayer/how-to-guides/web/cast/chromecast/introduction.mdx
index d0e0e26d4952..054d7ec30ac2 100644
--- a/theoplayer/how-to-guides/web/cast/chromecast/introduction.mdx
+++ b/theoplayer/how-to-guides/web/cast/chromecast/introduction.mdx
@@ -71,3 +71,7 @@ Furthermore, you can also [specify the application ID](./enable-chromecast-on-th
 - [Sending messages from/to Sender to/from Receiver](./sending-messages-from-to-sender-to-from-receiver.mdx)
 - [Pass subtitle selection on to Chromecast](./pass-subtitle-section-on-to-chromecast.mdx)
 - [Enable Chromecast on the Sender](./enable-chromecast-on-the-sender.mdx)
+
+## Resources
+
+- [Online demo](../../../../examples/casting/02-chromecast.mdx)
diff --git a/theoplayer/how-to-guides/web/drm/introduction.mdx b/theoplayer/how-to-guides/web/drm/introduction.mdx
index 3466c2d1c4bf..6423f9b8e026 100644
--- a/theoplayer/how-to-guides/web/drm/introduction.mdx
+++ b/theoplayer/how-to-guides/web/drm/introduction.mdx
@@ -105,3 +105,7 @@ if (HLS) {
 ## Custom integration
 
 <CustomIntegration />
+
+## Resources
+
+- [Online demo](../../../examples/content-protection/01-drm.mdx)
diff --git a/theoplayer/how-to-guides/web/miscellaneous/clipping.mdx b/theoplayer/how-to-guides/web/miscellaneous/clipping.mdx
index 9a1ced651add..47d7eb1768db 100644
--- a/theoplayer/how-to-guides/web/miscellaneous/clipping.mdx
+++ b/theoplayer/how-to-guides/web/miscellaneous/clipping.mdx
@@ -44,3 +44,4 @@ player.addEventListener('durationchange', function () {
 
 - [Clip API](pathname:///theoplayer/v11/api-reference/web/interfaces/Clip.html)
 - [Frame accurate clipping in HLS](https://www.theoplayer.com/blog/frame-accurate-clipping-in-hls)
+- [Online demo](../../../examples/playback/08-clip-api-with-playlist.mdx)
diff --git a/theoplayer/how-to-guides/web/miscellaneous/up-next.mdx b/theoplayer/how-to-guides/web/miscellaneous/up-next.mdx
index 72a8a09c0ab9..b346e0c0d232 100644
--- a/theoplayer/how-to-guides/web/miscellaneous/up-next.mdx
+++ b/theoplayer/how-to-guides/web/miscellaneous/up-next.mdx
@@ -32,4 +32,4 @@ player.upnext.bar.offset = 106;
 ## Resources
 
 - [Up next API](pathname:///theoplayer/v11/api-reference/web/classes/Player.html#upnext)
-- [Online demo](https://www.theoplayer.com/theoplayer-demo-up-next)
+- [Online demo](../../../examples/ui/12-up-next.mdx)
diff --git a/theoplayer/how-to-guides/web/miscellaneous/web-audio.mdx b/theoplayer/how-to-guides/web/miscellaneous/web-audio.mdx
index db02d549e61f..1c985d2c9427 100644
--- a/theoplayer/how-to-guides/web/miscellaneous/web-audio.mdx
+++ b/theoplayer/how-to-guides/web/miscellaneous/web-audio.mdx
@@ -137,4 +137,5 @@ document.onmousemove = function (e) {
 
 - [Basic guide to the Web Audio API](../../../knowledge-base/03-playback/05-basic-guide-web-audio-api.md)
 - [MDN - Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
-- [Online demo](https://demo.theoplayer.com/web-audio-api)
+- [Online demo: Web Audio API](../../../examples/playback/09-web-audio-api.mdx)
+- [Online demo: Peak limiter](../../../examples/playback/10-peak-limiter.mdx)
diff --git a/theoplayer/how-to-guides/web/text-tracks/insert-subtitles.mdx b/theoplayer/how-to-guides/web/text-tracks/insert-subtitles.mdx
index 4b4961fd12ba..89d406fa2c71 100644
--- a/theoplayer/how-to-guides/web/text-tracks/insert-subtitles.mdx
+++ b/theoplayer/how-to-guides/web/text-tracks/insert-subtitles.mdx
@@ -38,6 +38,10 @@ player.source = {
 To style your subtitles, look into the player's
 [`textTrackStyle`](pathname:///theoplayer/v11/api-reference/web/interfaces/TextTrackStyle.html) property.
 
+## Resources
+
+- [Online demo](../../../examples/subtitles-metadata/01-closed-captions-subtitles.mdx)
+
 ## Related articles
 
 - [How to dynamically change the visible captions](./change-visible-captions.mdx)
diff --git a/theoplayer/how-to-guides/web/text-tracks/preview-thumbnails.mdx b/theoplayer/how-to-guides/web/text-tracks/preview-thumbnails.mdx
index 19fda085d303..46c1c0c773d9 100644
--- a/theoplayer/how-to-guides/web/text-tracks/preview-thumbnails.mdx
+++ b/theoplayer/how-to-guides/web/text-tracks/preview-thumbnails.mdx
@@ -32,6 +32,10 @@ If you use the [Open Video UI for Web](/theoplayer/ui/web/open-video-ui/)
 or [THEOplayer's default UI](../../../ui/web/index.mdx),
 the thumbnails are shown automatically when hovering or scrubbing the seek bar.
 
+## Resources
+
+- [Online demo](../../../examples/ui/06-preview-thumbnails.mdx)
+
 ## Related articles
 
 - [How to insert subtitles](./insert-subtitles.mdx)
diff --git a/theoplayer/how-to-guides/web/text-tracks/track-id3-cues.mdx b/theoplayer/how-to-guides/web/text-tracks/track-id3-cues.mdx
index 4db4ad6e04ec..f93f90ca5d16 100644
--- a/theoplayer/how-to-guides/web/text-tracks/track-id3-cues.mdx
+++ b/theoplayer/how-to-guides/web/text-tracks/track-id3-cues.mdx
@@ -81,7 +81,7 @@ player.textTracks.addEventListener('addtrack', handleTrackCreation);
 
 ## Resources
 
-<Resources />
+<Resources />- [Online demo](../../../examples/subtitles-metadata/02-id3-metadata.mdx)
 
 ## Related articles
 
diff --git a/theoplayer/static/theoplayer/v11/examples/chromeless-ui/demo.html b/theoplayer/static/theoplayer/v11/examples/chromeless-ui/demo.html
new file mode 100644
index 000000000000..9118d5dbe3f9
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/chromeless-ui/demo.html
@@ -0,0 +1,686 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chromeless UI</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #000;
+      }
+
+      .player {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        overflow: hidden;
+        background: #000;
+        color: #fff;
+        font-family: 'Noto Sans', sans-serif;
+        outline: none;
+      }
+
+      .player:fullscreen {
+        aspect-ratio: auto;
+      }
+
+      .player video {
+        width: 100%;
+        height: 100%;
+      }
+
+      /* The player hides other elements in its container and shows its poster on top of the video:
+         make our own controls visible and put them above the poster. */
+      .player > .center-icon,
+      .player > .spinner,
+      .player > .controls {
+        z-index: 2;
+        visibility: visible;
+      }
+
+      .player.idle {
+        cursor: none;
+      }
+
+      /* Big play/pause icon that flashes when the playback state changes, and the buffering spinner. */
+      .center-icon,
+      .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 72px;
+        height: 72px;
+        margin: -36px 0 0 -36px;
+        pointer-events: none;
+      }
+
+      .center-icon {
+        border-radius: 50%;
+        background: rgb(0 0 0 / 50%);
+        opacity: 0;
+      }
+
+      .center-icon.flash {
+        animation: flash 1.8s ease-out;
+      }
+
+      @keyframes flash {
+        0%,
+        45% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: scale(1.3);
+        }
+      }
+
+      .center-icon svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .spinner {
+        display: none;
+        box-sizing: border-box;
+        border: 6px solid rgb(255 255 255 / 25%);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 0.9s linear infinite;
+      }
+
+      .player.buffering .spinner {
+        display: block;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* Bottom panel with the title, buttons, scrubber and times. */
+      .controls {
+        position: absolute;
+        inset: auto 0 0 0;
+        padding: 48px 4% 3%;
+        background: linear-gradient(transparent, rgb(0 0 0 / 75%));
+        transition: opacity 0.4s;
+      }
+
+      .player.idle .controls {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .top-row {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        margin-bottom: 10px;
+      }
+
+      .title {
+        flex: 1;
+        margin: 0;
+        overflow: hidden;
+        font-size: clamp(14px, 3vw, 24px);
+        font-weight: 700;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .controls button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        padding: 8px;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(255 255 255 / 18%);
+        color: #fff;
+        cursor: pointer;
+        backdrop-filter: blur(12px);
+      }
+
+      .controls button:hover,
+      .controls button:focus-visible {
+        background: #fff;
+        color: #000;
+        outline: none;
+      }
+
+      .controls button[hidden] {
+        display: none;
+      }
+
+      .controls button svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+
+      .controls button[aria-pressed='true'] {
+        box-shadow: inset 0 0 0 2px #fff;
+      }
+
+      .scrubber {
+        position: relative;
+        height: 20px;
+      }
+
+      .track,
+      .buffered,
+      .played {
+        position: absolute;
+        top: 7px;
+        left: 0;
+        height: 6px;
+        border-radius: 3px;
+        pointer-events: none;
+      }
+
+      .track {
+        right: 0;
+        background: rgb(255 255 255 / 25%);
+      }
+
+      .buffered {
+        background: rgb(255 255 255 / 45%);
+      }
+
+      .played {
+        background: #fff;
+      }
+
+      .scrubber input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      .scrubber:focus-within .track {
+        outline: 2px solid #fff;
+        outline-offset: 3px;
+      }
+
+      .times {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 6px;
+        font-size: clamp(11px, 2vw, 15px);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* Subtitle and audio selection pop-ups, above the buttons. */
+      .track-menu {
+        position: absolute;
+        right: 4%;
+        bottom: calc(100% - 40px);
+        min-width: 180px;
+        max-height: 60vh;
+        overflow-y: auto;
+        padding: 6px;
+        border-radius: 12px;
+        background: rgb(30 30 30 / 85%);
+        backdrop-filter: blur(12px);
+      }
+
+      .track-menu[hidden] {
+        display: none;
+      }
+
+      .track-menu p {
+        margin: 4px 10px 6px;
+        font-size: 13px;
+        font-weight: 700;
+        opacity: 0.7;
+      }
+
+      .controls .track-menu button {
+        display: flex;
+        justify-content: flex-start;
+        gap: 8px;
+        width: 100%;
+        height: auto;
+        padding: 8px 10px;
+        border-radius: 8px;
+        background: none;
+        font: inherit;
+        font-size: 15px;
+        text-align: left;
+        backdrop-filter: none;
+      }
+
+      .controls .track-menu button:hover,
+      .controls .track-menu button:focus-visible {
+        background: rgb(255 255 255 / 10%);
+        color: rgb(255 255 255 / 70%);
+      }
+
+      .controls .track-menu button::before {
+        content: '';
+        width: 1em;
+      }
+
+      .controls .track-menu button[aria-checked='true']::before {
+        content: '\2713';
+      }
+
+      @media (max-width: 480px) {
+        .controls button {
+          width: 32px;
+          height: 32px;
+          padding: 6px;
+        }
+      }
+    </style>
+    <!-- For production use, host the THEOplayer library yourself and update this URL and the libraryLocation below. -->
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.chromeless.js"></script>
+  </head>
+  <body>
+    <!-- Keyboard: Space or Enter plays and pauses, the left and right arrows skip 10 seconds. -->
+    <div class="player" tabindex="0" aria-label="Video player">
+      <div class="center-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="#fff"><path class="center-path" d="M8 5v14l11-7z" /></svg>
+      </div>
+      <div class="spinner" aria-hidden="true"></div>
+      <div class="controls">
+        <div class="top-row">
+          <p class="title">Tears of Steel</p>
+          <button type="button" class="play-button" aria-label="Play">
+            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+          </button>
+          <button
+            type="button"
+            class="subtitles-button"
+            aria-label="Subtitles: off"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-controls="subtitles-menu"
+            hidden
+          >
+            <svg viewBox="0 0 24 24">
+              <path
+                d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"
+              />
+            </svg>
+          </button>
+          <button type="button" class="audio-button" aria-label="Audio" aria-haspopup="menu" aria-expanded="false" aria-controls="audio-menu" hidden>
+            <svg viewBox="0 0 24 24"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z" /></svg>
+          </button>
+          <button type="button" class="mute-button" aria-label="Mute">
+            <svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z" /></svg>
+          </button>
+          <button type="button" class="fullscreen-button" aria-label="Fullscreen">
+            <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></svg>
+          </button>
+        </div>
+        <div class="track-menu" id="subtitles-menu" role="menu" aria-label="Subtitles" hidden></div>
+        <div class="track-menu" id="audio-menu" role="menu" aria-label="Audio" hidden></div>
+        <div class="scrubber">
+          <div class="track"></div>
+          <div class="buffered"></div>
+          <div class="played"></div>
+          <input type="range" min="0" max="0" step="0.1" value="0" aria-label="Seek" />
+        </div>
+        <div class="times">
+          <span class="elapsed">0:00</span>
+          <span class="remaining">-0:00</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const PLAY_ICON = 'M8 5v14l11-7z';
+      const PAUSE_ICON = 'M6 19h4V5H6v14zm8-14v14h4V5h-4z';
+      const MUTED_ICON = 'M3 9v6h4l5 5V4L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z';
+      const UNMUTED_ICON = 'M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z';
+
+      const container = document.querySelector('.player');
+      const playButton = container.querySelector('.play-button');
+      const subtitlesButton = container.querySelector('.subtitles-button');
+      const audioButton = container.querySelector('.audio-button');
+      const muteButton = container.querySelector('.mute-button');
+      const fullscreenButton = container.querySelector('.fullscreen-button');
+      const seekInput = container.querySelector('.scrubber input');
+      const bufferedBar = container.querySelector('.buffered');
+      const playedBar = container.querySelector('.played');
+      const elapsedLabel = container.querySelector('.elapsed');
+      const remainingLabel = container.querySelector('.remaining');
+      const centerIcon = container.querySelector('.center-icon');
+
+      // A ChromelessPlayer renders only the video (and subtitles): every control on top of it is our own HTML.
+      // libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      // licenseUrl: Point this to your license file, or replace it with a license property.
+      const player = new THEOplayer.ChromelessPlayer(container, {
+        libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
+        licenseUrl: '../../../../theoplayer-license.txt',
+      });
+      window.player = player;
+
+      player.source = {
+        sources: { src: 'https://cdn.theoplayer.com/video/tears_of_steel/index.m3u8', type: 'application/x-mpegurl' },
+        poster: 'https://cdn.theoplayer.com/video/posters/tears_of_steel.jpg',
+      };
+
+      // Keep our controls on top of the video elements the player added to the container.
+      container.append(centerIcon, container.querySelector('.spinner'), container.querySelector('.controls'));
+
+      function formatTime(seconds) {
+        if (!Number.isFinite(seconds)) return '0:00';
+        seconds = Math.max(0, Math.floor(seconds));
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = String(seconds % 60).padStart(2, '0');
+        return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${secs}` : `${minutes}:${secs}`;
+      }
+
+      function setIcon(button, path) {
+        button.querySelector('path').setAttribute('d', path);
+      }
+
+      // Play and pause
+      function togglePlay() {
+        if (player.paused) {
+          player.play();
+        } else {
+          player.pause();
+        }
+      }
+
+      function updatePlayState() {
+        setIcon(playButton, player.paused ? PLAY_ICON : PAUSE_ICON);
+        playButton.setAttribute('aria-label', player.paused ? 'Play' : 'Pause');
+        updateIdle();
+      }
+
+      function flashCenterIcon() {
+        centerIcon.querySelector('path').setAttribute('d', player.paused ? PAUSE_ICON : PLAY_ICON);
+        // Restart the animation, also when it is still running.
+        centerIcon.classList.remove('flash');
+        void centerIcon.offsetWidth;
+        centerIcon.classList.add('flash');
+      }
+      centerIcon.addEventListener('animationend', () => centerIcon.classList.remove('flash'));
+
+      playButton.addEventListener('click', togglePlay);
+      player.addEventListener(['play', 'pause', 'ended'], updatePlayState);
+      player.addEventListener(['play', 'pause'], flashCenterIcon);
+
+      // Clicking the video plays or pauses, like on a native player.
+      // While the controls are hidden, the first tap only shows them again.
+      let controlsWereHidden = false;
+      container.addEventListener('pointerdown', () => {
+        controlsWereHidden = container.classList.contains('idle');
+      });
+      container.addEventListener('click', (event) => {
+        if (event.target.closest('.controls') || controlsWereHidden) return;
+        // A click outside an open menu only closes it.
+        if (isAnyMenuOpen()) {
+          closeMenus();
+          return;
+        }
+        togglePlay();
+      });
+
+      // Buffering spinner
+      player.addEventListener('waiting', () => container.classList.add('buffering'));
+      player.addEventListener(['playing', 'pause', 'ended', 'error'], () => container.classList.remove('buffering'));
+
+      // Scrubber and times
+      let seeking = false;
+
+      function updateTime() {
+        const duration = player.duration;
+        const time = seeking ? Number(seekInput.value) : player.currentTime;
+        if (Number.isFinite(duration) && duration > 0) {
+          seekInput.max = String(duration);
+          if (!seeking) seekInput.value = String(time);
+          playedBar.style.width = `${(time / duration) * 100}%`;
+          seekInput.setAttribute('aria-valuetext', `${formatTime(time)} of ${formatTime(duration)}`);
+        }
+        elapsedLabel.textContent = formatTime(time);
+        remainingLabel.textContent = `-${formatTime(duration - time)}`;
+      }
+
+      function updateBuffered() {
+        const duration = player.duration;
+        const buffered = player.buffered;
+        let end = 0;
+        for (let i = 0; i < buffered.length; i++) {
+          if (buffered.start(i) <= player.currentTime + 0.5) end = Math.max(end, buffered.end(i));
+        }
+        bufferedBar.style.width = Number.isFinite(duration) && duration > 0 ? `${(end / duration) * 100}%` : '0';
+      }
+
+      seekInput.addEventListener('input', () => {
+        seeking = true;
+        updateTime();
+      });
+      seekInput.addEventListener('change', () => {
+        player.currentTime = Number(seekInput.value);
+        seeking = false;
+      });
+      player.addEventListener(['timeupdate', 'durationchange', 'seeking'], updateTime);
+      player.addEventListener(['progress', 'timeupdate', 'durationchange'], updateBuffered);
+
+      // Subtitles and audio: each button opens a pop-up menu to pick a track.
+      const trackMenus = [];
+
+      function createTrackMenu({ button, heading, options }) {
+        const menu = document.getElementById(button.getAttribute('aria-controls'));
+
+        // options() returns one { label, checked, select } entry per menu item.
+        function render() {
+          const title = document.createElement('p');
+          title.textContent = heading;
+          const items = options().map((option) => {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.setAttribute('role', 'menuitemradio');
+            item.setAttribute('aria-checked', String(option.checked));
+            item.textContent = option.label;
+            item.addEventListener('click', () => {
+              option.select();
+              close({ focusButton: true });
+            });
+            return item;
+          });
+          menu.replaceChildren(title, ...items);
+        }
+
+        function open() {
+          trackMenus.forEach((other) => other.close());
+          render();
+          menu.hidden = false;
+          button.setAttribute('aria-expanded', 'true');
+          (menu.querySelector('[aria-checked="true"]') ?? menu.querySelector('button')).focus();
+          updateIdle();
+        }
+
+        function close({ focusButton = false } = {}) {
+          if (menu.hidden) return;
+          menu.hidden = true;
+          button.setAttribute('aria-expanded', 'false');
+          if (focusButton) button.focus();
+          updateIdle();
+        }
+
+        button.addEventListener('click', () => (menu.hidden ? open() : close()));
+
+        // Up and down move through the menu, Escape closes it.
+        menu.addEventListener('keydown', (event) => {
+          const items = Array.from(menu.querySelectorAll('button'));
+          const index = items.indexOf(document.activeElement);
+          if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const next = (index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+            items[next].focus();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            close({ focusButton: true });
+          }
+        });
+
+        const trackMenu = {
+          close,
+          isOpen: () => !menu.hidden,
+          refresh: () => {
+            if (!menu.hidden) render();
+          },
+        };
+        trackMenus.push(trackMenu);
+        return trackMenu;
+      }
+
+      function isAnyMenuOpen() {
+        return trackMenus.some((trackMenu) => trackMenu.isOpen());
+      }
+
+      function closeMenus() {
+        trackMenus.forEach((trackMenu) => trackMenu.close());
+      }
+
+      // Close the menus when a click goes outside the player.
+      document.addEventListener('pointerdown', (event) => {
+        if (!event.target.closest('.player')) closeMenus();
+      });
+
+      // Subtitles: "Off" and each subtitle track.
+      function subtitleTracks() {
+        return Array.from(player.textTracks).filter((track) => track.kind === 'subtitles' || track.kind === 'captions');
+      }
+
+      const subtitlesMenu = createTrackMenu({
+        button: subtitlesButton,
+        heading: 'Subtitles',
+        options: () => {
+          const tracks = subtitleTracks();
+          const showing = tracks.find((track) => track.mode === 'showing') ?? null;
+          return [null, ...tracks].map((selected) => ({
+            label: selected ? selected.label || selected.language : 'Off',
+            checked: selected === showing,
+            select: () =>
+              tracks.forEach((track) => {
+                track.mode = track === selected ? 'showing' : 'disabled';
+              }),
+          }));
+        },
+      });
+
+      function updateSubtitlesButton() {
+        const tracks = subtitleTracks();
+        const showing = tracks.find((track) => track.mode === 'showing');
+        subtitlesButton.hidden = tracks.length === 0;
+        subtitlesButton.setAttribute('aria-label', `Subtitles: ${showing ? showing.label || showing.language : 'off'}`);
+        subtitlesMenu.refresh();
+      }
+      player.textTracks.addEventListener(['addtrack', 'removetrack', 'change'], updateSubtitlesButton);
+
+      // Audio: each audio track, if there are several.
+      const audioMenu = createTrackMenu({
+        button: audioButton,
+        heading: 'Audio',
+        options: () =>
+          Array.from(player.audioTracks).map((track) => ({
+            label: track.label || track.language,
+            checked: track.enabled,
+            select: () => {
+              track.enabled = true;
+            },
+          })),
+      });
+
+      function updateAudioButton() {
+        const tracks = Array.from(player.audioTracks);
+        const enabled = tracks.find((track) => track.enabled);
+        audioButton.hidden = tracks.length < 2;
+        audioButton.setAttribute('aria-label', `Audio: ${enabled ? enabled.label || enabled.language : 'default'}`);
+        audioMenu.refresh();
+      }
+      player.audioTracks.addEventListener(['addtrack', 'removetrack', 'change'], updateAudioButton);
+
+      // Mute
+      function updateMuteButton() {
+        setIcon(muteButton, player.muted ? MUTED_ICON : UNMUTED_ICON);
+        muteButton.setAttribute('aria-label', player.muted ? 'Unmute' : 'Mute');
+      }
+
+      muteButton.addEventListener('click', () => {
+        player.muted = !player.muted;
+      });
+      player.addEventListener('volumechange', updateMuteButton);
+
+      // Fullscreen
+      // Put the whole container in fullscreen, so our own controls stay visible.
+      // Where an element can't go fullscreen (iPhone), let the player show its video in fullscreen instead.
+      const fullscreenElement = () => document.fullscreenElement ?? document.webkitFullscreenElement;
+      const isFullscreen = () => fullscreenElement() === container || player.presentation.currentMode === 'fullscreen';
+      fullscreenButton.addEventListener('click', () => {
+        if (fullscreenElement() === container) {
+          (document.exitFullscreen ?? document.webkitExitFullscreen).call(document);
+        } else if (player.presentation.currentMode === 'fullscreen') {
+          player.presentation.requestMode('inline');
+        } else if (container.requestFullscreen) {
+          container.requestFullscreen();
+        } else if (container.webkitRequestFullscreen) {
+          container.webkitRequestFullscreen();
+        } else {
+          player.presentation.requestMode('fullscreen');
+        }
+      });
+      function updateFullscreenButton() {
+        fullscreenButton.setAttribute('aria-label', isFullscreen() ? 'Exit fullscreen' : 'Fullscreen');
+      }
+      document.addEventListener('fullscreenchange', updateFullscreenButton);
+      document.addEventListener('webkitfullscreenchange', updateFullscreenButton);
+      player.presentation.addEventListener('presentationmodechange', updateFullscreenButton);
+
+      // Hide the controls after 3 seconds without activity while playing.
+      let idleTimer;
+
+      function updateIdle() {
+        clearTimeout(idleTimer);
+        container.classList.remove('idle');
+        // Keep the controls visible while paused or while a menu is open.
+        if (!player.paused && !isAnyMenuOpen()) {
+          idleTimer = setTimeout(() => container.classList.add('idle'), 3000);
+        }
+      }
+
+      container.addEventListener('pointermove', updateIdle);
+      container.addEventListener('pointerup', updateIdle);
+      container.addEventListener('focusin', updateIdle);
+
+      // Keyboard, like a remote: Space or Enter plays and pauses, the arrows skip 10 seconds.
+      container.addEventListener('keydown', (event) => {
+        updateIdle();
+        if (event.target !== container && event.target !== seekInput) return;
+        if (event.key === ' ' || (event.key === 'Enter' && event.target === container)) {
+          event.preventDefault();
+          togglePlay();
+        } else if (event.target === container && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+          event.preventDefault();
+          player.currentTime += event.key === 'ArrowLeft' ? -10 : 10;
+        }
+      });
+
+      updatePlayState();
+      updateMuteButton();
+      updateTime();
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/clip-api-with-playlist/demo.html b/theoplayer/static/theoplayer/v11/examples/clip-api-with-playlist/demo.html
new file mode 100644
index 000000000000..ad516ce59992
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/clip-api-with-playlist/demo.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Clip API with playlist</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the script above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+    ></theoplayer-default-ui>
+    <script src="../utils.js"></script>
+    <script>
+      // Each playlist item plays only the part between clip.startTime and clip.endTime (in seconds).
+      const playlist = [
+        {
+          title: 'Big Buck Bunny',
+          poster: 'https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg',
+          clip: { startTime: 30, endTime: 80 },
+          source: {
+            sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', type: 'application/x-mpegurl' },
+            poster: 'https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg',
+            metadata: { title: 'Big Buck Bunny' },
+          },
+        },
+        {
+          title: 'Star Wars',
+          poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg',
+          clip: { startTime: 10, endTime: 40 },
+          source: {
+            sources: {
+              src: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',
+              type: 'application/x-mpegurl',
+            },
+            poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg',
+            metadata: { title: 'Star Wars' },
+          },
+        },
+        {
+          title: 'Tears of Steel',
+          poster: 'https://cdn.theoplayer.com/video/tears_of_steel/poster.jpg',
+          clip: { startTime: 50, endTime: 100 },
+          source: {
+            sources: { src: 'https://cdn.theoplayer.com/video/tears_of_steel/index.m3u8', type: 'application/x-mpegurl' },
+            poster: 'https://cdn.theoplayer.com/video/tears_of_steel/poster.jpg',
+            metadata: { title: 'Tears of Steel' },
+          },
+        },
+      ];
+
+      onPlayerReady((player) => {
+        let active = 0;
+
+        function report() {
+          sendToParent('playlist-state', {
+            active,
+            items: playlist.map((item) => ({ title: item.title, poster: item.poster, clip: item.clip })),
+          });
+        }
+
+        function loadItem(index, autoplay) {
+          if (index < 0 || index >= playlist.length) return;
+          active = index;
+          if (autoplay) player.autoplay = true;
+          player.source = playlist[index].source;
+          report();
+        }
+
+        // Changing the source resets the clip to the whole stream,
+        // so apply the clip of the active item again once the new source has a duration.
+        player.addEventListener('durationchange', () => {
+          player.clip.startTime = playlist[active].clip.startTime;
+          player.clip.endTime = playlist[active].clip.endTime;
+        });
+
+        // 'ended' fires at the end of the clip: continue with the next item.
+        player.addEventListener('ended', () => loadItem(active + 1, true));
+
+        onParentMessage('playlist-load', (message) => loadItem(message.index, true));
+        onParentMessage('playlist-previous', () => loadItem(active - 1, true));
+        onParentMessage('playlist-next', () => loadItem(active + 1, true));
+        onParentMessage('playlist-add', (message) => {
+          playlist.push({
+            title: message.title,
+            poster: '',
+            clip: { startTime: message.startTime, endTime: message.endTime },
+            source: { sources: { src: message.src }, metadata: { title: message.title } },
+          });
+          loadItem(playlist.length - 1, true);
+        });
+
+        // Initial item, no autoplay.
+        loadItem(0, false);
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/debug-display/demo.html b/theoplayer/static/theoplayer/v11/examples/debug-display/demo.html
new file mode 100644
index 000000000000..2f76e1a08a57
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/debug-display/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Debug display</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+    </style>
+    <!--
+      The debug display is only available as an ES module, so this example loads Open Video UI as an ES module too.
+      The import map tells the browser where to find each package.
+      For production use, install the packages from npm and bundle them with your application instead.
+    -->
+    <script type="importmap">
+      {
+        "imports": {
+          "theoplayer/chromeless": "https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.chromeless.esm.js",
+          "@theoplayer/web-ui": "https://ga.jspm.io/npm:@theoplayer/web-ui@2.6.1/dist/THEOplayerUI.mjs",
+          "@theoplayer/web-ui/debug": "https://ga.jspm.io/npm:@theoplayer/web-ui@2.6.1/dist/THEOplayerUI.debug.mjs",
+          "lit": "https://ga.jspm.io/npm:lit@3.3.1/index.js",
+          "lit/decorators.js": "https://ga.jspm.io/npm:lit@3.3.1/decorators.js",
+          "lit/directives/": "https://ga.jspm.io/npm:lit@3.3.1/directives/"
+        },
+        "scopes": {
+          "https://ga.jspm.io/": {
+            "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/reactive-element.js",
+            "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/decorators/",
+            "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.2.1/lit-element.js",
+            "lit-html": "https://ga.jspm.io/npm:lit-html@3.3.1/lit-html.js",
+            "lit-html/": "https://ga.jspm.io/npm:lit-html@3.3.1/"
+          }
+        }
+      }
+    </script>
+    <script type="module">
+      import * as THEOplayerUI from '@theoplayer/web-ui';
+      import '@theoplayer/web-ui/debug';
+      // Expose the UI and the player library for use from the browser's developer console.
+      window.THEOplayerUI = THEOplayerUI;
+      window.THEOplayer = await import('theoplayer/chromeless');
+    </script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the import map above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+
+      <theoplayer-debug-display> shows the diagnostics in the overlay slot. It starts hidden.
+      <theoplayer-debug-button> shows or hides the debug display from the control bar.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8","type":"application/x-mpegurl"},"poster":"https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg","metadata":{"title":"Big Buck Bunny"}}'
+    >
+      <theoplayer-debug-display slot="overlay" hidden></theoplayer-debug-display>
+      <theoplayer-debug-button slot="bottom-control-bar"></theoplayer-debug-button>
+    </theoplayer-default-ui>
+    <script src="../utils.js"></script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/peak-limiter/demo.html b/theoplayer/static/theoplayer/v11/examples/peak-limiter/demo.html
new file mode 100644
index 000000000000..3c3c5b0c468a
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/peak-limiter/demo.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Peak limiter</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Noto Sans', sans-serif;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "@synthlet/lookahead-limiter": "https://unpkg.com/@synthlet/lookahead-limiter@0.2.0/dist/index.mjs"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the script above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/sintel.mp4","type":"video/mp4","crossOrigin":"anonymous"},"poster":"https://cdn.theoplayer.com/video/posters/sintel.jpg","metadata":{"title":"Sintel"}}'
+    ></theoplayer-default-ui>
+    <script src="../utils.js"></script>
+    <script type="module">
+      import { registerLookaheadLimiterWorklet, LookaheadLimiter } from '@synthlet/lookahead-limiter';
+
+      onPlayerReady(async (player) => {
+        const context = new AudioContext();
+        await registerLookaheadLimiterWorklet(context);
+
+        let boostDecibels = 18;
+        let ceilingDecibels = -1;
+        let limiterEnabled = true;
+
+        // With the limiter on:  source -> limiter (boost + ceiling) -> meter -> speakers
+        // With the limiter off: source -> boost -> meter -> speakers
+        const source = player.audio.createAudioSourceNode(context);
+        const limiter = LookaheadLimiter(context, {
+          gain: boostDecibels,
+          threshold: ceilingDecibels,
+        });
+        const boost = new GainNode(context, { gain: decibelsToGain(boostDecibels) });
+        const meter = new AnalyserNode(context, { fftSize: 2048 });
+
+        limiter.connect(meter);
+        boost.connect(meter);
+        meter.connect(context.destination);
+
+        function connectSource() {
+          source.disconnect();
+          source.connect(limiterEnabled ? limiter : boost);
+        }
+        connectSource();
+
+        // Browsers start an AudioContext suspended until the user interacts with the page.
+        // While it's suspended, the player's audio is silent, so resume it on playback and on any interaction.
+        function resumeContext() {
+          if (context.state === 'suspended') context.resume();
+        }
+        player.addEventListener('play', resumeContext);
+        document.addEventListener('pointerdown', resumeContext);
+        document.addEventListener('keydown', resumeContext);
+
+        onParentMessage('limiter-boost', ({ decibels }) => {
+          limiter.gain.setTargetAtTime(decibels, context.currentTime, 0.02);
+          boost.gain.setTargetAtTime(decibelsToGain(decibels), context.currentTime, 0.02);
+        });
+
+        onParentMessage('limiter-ceiling', ({ decibels }) => {
+          limiter.threshold.setTargetAtTime(decibels, context.currentTime, 0.02);
+        });
+
+        onParentMessage('limiter-enabled', ({ enabled }) => {
+          limiterEnabled = enabled;
+          connectSource();
+        });
+
+        // Report the highest sample of the output a few times per second. Above 0 dB, the audio clips.
+        const samples = new Float32Array(meter.fftSize);
+        let peakHold = 0;
+        let peakHoldUntil = 0;
+        let lastReport = 0;
+
+        function measurePeak(now) {
+          requestAnimationFrame(measurePeak);
+          meter.getFloatTimeDomainData(samples);
+          const peak = samples.reduce((max, sample) => Math.max(max, Math.abs(sample)), 0);
+          if (peak >= peakHold || now > peakHoldUntil) {
+            peakHold = peak;
+            peakHoldUntil = now + 1000;
+          }
+          if (now - lastReport < 100) return;
+          lastReport = now;
+          const decibels = 20 * Math.log10(peakHold);
+          sendToParent('limiter-peak', { decibels: Number.isFinite(decibels) ? decibels : null });
+        }
+        requestAnimationFrame(measurePeak);
+      });
+
+      function decibelsToGain(decibels) {
+        return 10 ** (decibels / 20);
+      }
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/up-next/default-ui.html b/theoplayer/static/theoplayer/v11/examples/up-next/default-ui.html
new file mode 100644
index 000000000000..bfaf5eb63e2e
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/up-next/default-ui.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Up Next (Default UI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.theoplayer.com/dash/theoplayer/ui.css" />
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .player-container {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+      }
+
+      .player-container .video-js {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="player-container">
+      <div id="player" class="video-js theoplayer-skin"></div>
+    </div>
+    <script>
+      // libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      // For production use, host the library yourself and update this URL and the script above.
+      // licenseUrl: Point this to your license file, or replace it with a license property.
+      var player = new THEOplayer.Player(document.querySelector('#player'), {
+        libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
+        licenseUrl: '../../../../theoplayer-license.txt',
+        mutedAutoplay: 'all',
+      });
+      window.player = player;
+
+      player.source = {
+        sources: [{ src: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8', type: 'application/x-mpegurl' }],
+        poster: 'https://cdn.theoplayer.com/video/posters/elephants_dream.jpg',
+        metadata: { title: "Elephant's Dream" },
+      };
+
+      // Up Next opens the link when the viewer clicks the bar or the play button, or when the countdown ends.
+      player.upnext.source = {
+        title: 'Big Buck Bunny',
+        image: 'https://cdn.theoplayer.com/video/posters/big_buck_bunny.jpg',
+        duration: '9:56',
+        link: 'next-default-ui.html',
+      };
+      // Show the Up Next bar 106 seconds before the end of the video.
+      player.upnext.bar.offset = 106;
+      // Show the Up Next screen for 10 seconds after the video ends.
+      player.upnext.panel.countdownDuration = 10;
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/up-next/demo.html b/theoplayer/static/theoplayer/v11/examples/up-next/demo.html
new file mode 100644
index 000000000000..107c832ad70d
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/up-next/demo.html
@@ -0,0 +1,305 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Up Next</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+
+      /* The overlay covers the whole player: only the bar and the end screen take clicks. */
+      .upnext {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+        color: #fff;
+      }
+
+      /* Bar in the bottom right corner */
+      .upnext-bar {
+        position: absolute;
+        right: 12px;
+        bottom: 64px;
+        display: flex;
+        max-width: calc(100% - 24px);
+        background: rgb(0 0 0 / 85%);
+        border-radius: 4px;
+        overflow: hidden;
+        pointer-events: auto;
+        transform: translateX(calc(100% + 12px));
+        transition: transform 0.4s ease;
+      }
+
+      .upnext-bar.visible {
+        transform: none;
+      }
+
+      .upnext-open {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+        padding: 8px 4px 8px 8px;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .upnext-thumbnail {
+        position: relative;
+        flex-shrink: 0;
+        width: 112px;
+        aspect-ratio: 16 / 9;
+        background: center / cover no-repeat;
+      }
+
+      .upnext-thumbnail span {
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        padding: 0 4px;
+        background: rgb(0 0 0 / 75%);
+        font-size: 12px;
+      }
+
+      .upnext-text {
+        display: grid;
+        min-width: 0;
+        font-size: 14px;
+      }
+
+      .upnext-text strong {
+        font-size: 15px;
+      }
+
+      .upnext-text span {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .upnext-close {
+        align-self: flex-start;
+        width: 32px;
+        height: 32px;
+        border: 0;
+        background: none;
+        color: inherit;
+        font-size: 20px;
+        line-height: 1;
+        cursor: pointer;
+      }
+
+      .upnext-open:focus-visible,
+      .upnext-close:focus-visible,
+      .upnext-play:focus-visible {
+        outline: 2px solid #fff;
+        outline-offset: -2px;
+      }
+
+      /* End screen with the poster of the next video */
+      .upnext-panel {
+        position: absolute;
+        inset: 0;
+        background: center / cover no-repeat;
+        pointer-events: auto;
+      }
+
+      .upnext-panel[hidden] {
+        display: none;
+      }
+
+      .upnext-panel::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: rgb(0 0 0 / 60%);
+      }
+
+      .upnext-header {
+        position: relative;
+        padding: 4% 5% 0;
+        font-size: clamp(14px, 3vw, 22px);
+      }
+
+      .upnext-header strong {
+        display: block;
+        font-size: clamp(18px, 4.5vw, 34px);
+      }
+
+      .upnext-play {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: clamp(72px, 18%, 120px);
+        aspect-ratio: 1;
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(0 0 0 / 40%);
+        color: #fff;
+        cursor: pointer;
+      }
+
+      .upnext-play svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      /* The ring around the play button fills up during the countdown. */
+      .upnext-ring {
+        fill: none;
+        stroke: var(--theoplayer-primary-color, #ffc50f);
+        stroke-width: 4;
+        stroke-dasharray: 289;
+        stroke-dashoffset: 289;
+        transform: rotate(-90deg);
+        transform-origin: center;
+      }
+
+      .upnext-panel.counting .upnext-ring {
+        stroke-dashoffset: 0;
+        transition: stroke-dashoffset var(--countdown-duration) linear;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the script above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8","type":"application/x-mpegurl"},"poster":"https://cdn.theoplayer.com/video/posters/elephants_dream.jpg","metadata":{"title":"Elephant&apos;s Dream"}}'
+    >
+      <div class="upnext" slot="overlay">
+        <div class="upnext-bar">
+          <button type="button" class="upnext-open" aria-label="Play next: Big Buck Bunny">
+            <span class="upnext-thumbnail"><span class="upnext-duration"></span></span>
+            <span class="upnext-text">
+              <strong>Up Next</strong>
+              <span class="upnext-title"></span>
+            </span>
+          </button>
+          <button type="button" class="upnext-close" aria-label="Close">×</button>
+        </div>
+        <div class="upnext-panel" hidden>
+          <div class="upnext-header">
+            Up Next
+            <strong class="upnext-title"></strong>
+          </div>
+          <button type="button" class="upnext-play" aria-label="Play next: Big Buck Bunny">
+            <svg viewBox="0 0 100 100" aria-hidden="true">
+              <circle class="upnext-ring" cx="50" cy="50" r="46" />
+              <path d="M40 30v40l32-20z" fill="currentColor" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </theoplayer-default-ui>
+    <script src="../utils.js"></script>
+    <script>
+      // Up Next opens another page that plays the next video.
+      const upNext = {
+        title: 'Big Buck Bunny',
+        image: 'https://cdn.theoplayer.com/video/posters/big_buck_bunny.jpg',
+        duration: '9:56',
+        link: 'next.html',
+      };
+      // Show the bar this many seconds before the end of the video.
+      const BAR_OFFSET = 106;
+      // Show the end screen this many seconds before opening the next page.
+      const COUNTDOWN_DURATION = 10;
+
+      const bar = document.querySelector('.upnext-bar');
+      const panel = document.querySelector('.upnext-panel');
+
+      document.querySelector('.upnext-thumbnail').style.backgroundImage = `url("${upNext.image}")`;
+      document.querySelector('.upnext-duration').textContent = upNext.duration;
+      document.querySelectorAll('.upnext-title').forEach((element) => (element.textContent = upNext.title));
+      panel.style.backgroundImage = `url("${upNext.image}")`;
+      panel.style.setProperty('--countdown-duration', `${COUNTDOWN_DURATION}s`);
+
+      function playNext() {
+        window.location.href = upNext.link;
+      }
+
+      document.querySelector('.upnext-open').addEventListener('click', playNext);
+      document.querySelector('.upnext-play').addEventListener('click', playNext);
+
+      onPlayerReady((player) => {
+        let dismissed = false;
+        let countdownTimer;
+
+        function updateBar() {
+          const remaining = player.duration - player.currentTime;
+          const visible = !dismissed && panel.hidden && Number.isFinite(remaining) && remaining <= BAR_OFFSET;
+          bar.classList.toggle('visible', visible);
+          bar.inert = !visible;
+        }
+
+        function showPanel() {
+          bar.classList.remove('visible');
+          bar.inert = true;
+          panel.hidden = false;
+          // Start the ring animation on the next frame, so the transition runs from empty to full.
+          requestAnimationFrame(() => requestAnimationFrame(() => panel.classList.add('counting')));
+          countdownTimer = setTimeout(playNext, COUNTDOWN_DURATION * 1000);
+        }
+
+        function hidePanel() {
+          if (panel.hidden) return;
+          clearTimeout(countdownTimer);
+          panel.classList.remove('counting');
+          panel.hidden = true;
+          updateBar();
+        }
+
+        document.querySelector('.upnext-close').addEventListener('click', () => {
+          dismissed = true;
+          updateBar();
+        });
+
+        player.addEventListener(['timeupdate', 'durationchange'], updateBar);
+        player.addEventListener('ended', showPanel);
+        // Seeking back or replaying cancels the countdown.
+        player.addEventListener(['seeking', 'play'], hidePanel);
+        player.addEventListener('sourcechange', () => {
+          dismissed = false;
+          hidePanel();
+        });
+
+        updateBar();
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/up-next/next-default-ui.html b/theoplayer/static/theoplayer/v11/examples/up-next/next-default-ui.html
new file mode 100644
index 000000000000..cecc6ec9efb0
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/up-next/next-default-ui.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Up Next: Big Buck Bunny (Default UI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.theoplayer.com/dash/theoplayer/ui.css" />
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .player-container {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+      }
+
+      .player-container .video-js {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- The page that Up Next opens from the Default UI example. It plays the next video. -->
+    <div class="player-container">
+      <div id="player" class="video-js theoplayer-skin"></div>
+    </div>
+    <script>
+      // libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      // For production use, host the library yourself and update this URL and the script above.
+      // licenseUrl: Point this to your license file, or replace it with a license property.
+      var player = new THEOplayer.Player(document.querySelector('#player'), {
+        libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
+        licenseUrl: '../../../../theoplayer-license.txt',
+        mutedAutoplay: 'all',
+      });
+      window.player = player;
+
+      player.autoplay = true;
+      player.source = {
+        sources: [
+          {
+            src: 'https://cdn.theoplayer.com/video/dash/big_buck_bunny/BigBuckBunny_10s_simple_2014_05_09.mpd',
+            type: 'application/dash+xml',
+          },
+        ],
+        poster: 'https://cdn.theoplayer.com/video/posters/big_buck_bunny.jpg',
+        metadata: { title: 'Big Buck Bunny' },
+      };
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/up-next/next.html b/theoplayer/static/theoplayer/v11/examples/up-next/next.html
new file mode 100644
index 000000000000..5610c8f78b16
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/up-next/next.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Up Next: Big Buck Bunny</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+  </head>
+  <body>
+    <!-- The page that Up Next opens. It plays the next video. -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/dash/big_buck_bunny/BigBuckBunny_10s_simple_2014_05_09.mpd","type":"application/dash+xml"},"poster":"https://cdn.theoplayer.com/video/posters/big_buck_bunny.jpg","metadata":{"title":"Big Buck Bunny"}}'
+      autoplay
+    ></theoplayer-default-ui>
+    <script src="../utils.js"></script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/video-fit/default-ui.html b/theoplayer/static/theoplayer/v11/examples/video-fit/default-ui.html
new file mode 100644
index 000000000000..28da21790cda
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/video-fit/default-ui.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Video fit (Default UI)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.theoplayer.com/dash/theoplayer/ui.css" />
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+
+      /* Make the player wider than the 16:9 video, so the effect of each fit is visible. */
+      .player-container {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 21 / 9;
+      }
+
+      .player-container .video-js {
+        width: 100%;
+        height: 100%;
+      }
+
+      /* How the video fits inside the player: contain (default), cover or fill. */
+      .theoplayer-skin video {
+        object-fit: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="player-container">
+      <div id="player" class="video-js theoplayer-skin"></div>
+    </div>
+    <script src="../utils.js"></script>
+    <script>
+      var player = new THEOplayer.Player(document.querySelector('#player'), {
+        libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
+        licenseUrl: '../../../../theoplayer-license.txt',
+        mutedAutoplay: 'all',
+      });
+      player.source = {
+        sources: [{ src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', type: 'application/x-mpegurl' }],
+        poster: 'https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg',
+        metadata: { title: 'Big Buck Bunny' },
+      };
+
+      onParentMessage('video-fit', function (message) {
+        document.querySelectorAll('.theoplayer-skin video').forEach(function (video) {
+          video.style.objectFit = message.fit;
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/video-fit/demo.html b/theoplayer/static/theoplayer/v11/examples/video-fit/demo.html
new file mode 100644
index 000000000000..9e05c7183de6
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/video-fit/demo.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Video fit</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Noto Sans', sans-serif;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+        /* Make the player wider than the 16:9 video, so the effect of each fit is visible. */
+        --theoplayer-aspect-ratio: 21 / 9;
+        /* How the video fits inside the player: contain (default), cover or fill. */
+        --theoplayer-video-object-fit: contain;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the script above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8","type":"application/x-mpegurl"},"poster":"https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg","metadata":{"title":"Big Buck Bunny"}}'
+    ></theoplayer-default-ui>
+    <script src="../utils.js"></script>
+    <script>
+      const ui = document.querySelector('theoplayer-default-ui');
+      onParentMessage('video-fit', ({ fit }) => {
+        ui.style.setProperty('--theoplayer-video-object-fit', fit);
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/web-audio/demo.html b/theoplayer/static/theoplayer/v11/examples/web-audio/demo.html
new file mode 100644
index 000000000000..e73a5dbdf3d5
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/web-audio/demo.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Web Audio API</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Noto Sans', sans-serif;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+
+      .spectrum {
+        display: block;
+        width: 100%;
+        height: 100px;
+        background: #000;
+      }
+    </style>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      For production use, host the library yourself and update this URL and the script above.
+
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt"}'
+      source='{"sources":{"src":"https://cdn.theoplayer.com/video/elephants-dream.mp4","type":"video/mp4","crossOrigin":"anonymous"},"poster":"https://cdn.theoplayer.com/video/posters/elephants_dream.jpg","metadata":{"title":"Elephants Dream"}}'
+    ></theoplayer-default-ui>
+    <canvas class="spectrum" aria-label="Audio spectrum"></canvas>
+    <script src="../utils.js"></script>
+    <script>
+      onPlayerReady((player) => {
+        const context = new AudioContext();
+
+        // Route the player's audio into the audio graph:
+        // source -> panner -> bass -> mid -> treble -> volume -> analyser -> speakers
+        const source = player.audio.createAudioSourceNode(context);
+        const panner = new StereoPannerNode(context);
+        const bass = new BiquadFilterNode(context, { type: 'lowshelf', frequency: 250 });
+        const mid = new BiquadFilterNode(context, { type: 'peaking', frequency: 1000, Q: 1 });
+        const treble = new BiquadFilterNode(context, { type: 'highshelf', frequency: 4000 });
+        const volume = new GainNode(context);
+        const analyser = new AnalyserNode(context, { fftSize: 256 });
+
+        panner.connect(bass).connect(mid).connect(treble).connect(volume).connect(analyser);
+        analyser.connect(context.destination);
+
+        function connectSource(bypass) {
+          source.disconnect();
+          source.connect(bypass ? analyser : panner);
+        }
+        connectSource(false);
+
+        // Browsers start an AudioContext suspended until the user interacts with the page.
+        // While it's suspended, the player's audio is silent, so resume it on playback and on any interaction.
+        function resumeContext() {
+          if (context.state === 'suspended') context.resume();
+        }
+        player.addEventListener('play', resumeContext);
+        document.addEventListener('pointerdown', resumeContext);
+        document.addEventListener('keydown', resumeContext);
+
+        // Change parameters smoothly with setTargetAtTime to avoid audible clicks.
+        const params = {
+          pan: panner.pan,
+          bass: bass.gain,
+          mid: mid.gain,
+          treble: treble.gain,
+          volume: volume.gain,
+        };
+
+        onParentMessage('web-audio-param', ({ name, value }) => {
+          params[name].setTargetAtTime(value, context.currentTime, 0.02);
+        });
+
+        onParentMessage('web-audio-bypass', ({ bypass }) => connectSource(bypass));
+
+        // Draw the frequency spectrum from the analyser.
+        const canvas = document.querySelector('.spectrum');
+        const canvasContext = canvas.getContext('2d');
+        const data = new Uint8Array(analyser.frequencyBinCount);
+
+        function draw() {
+          requestAnimationFrame(draw);
+          const width = (canvas.width = canvas.clientWidth * devicePixelRatio);
+          const height = (canvas.height = canvas.clientHeight * devicePixelRatio);
+          analyser.getByteFrequencyData(data);
+          const barWidth = width / data.length;
+          canvasContext.fillStyle = '#ffc50f';
+          data.forEach((value, index) => {
+            const barHeight = (value / 255) * height;
+            canvasContext.fillRect(index * barWidth, height - barHeight, Math.max(1, barWidth - 1), barHeight);
+          });
+        }
+        draw();
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/static/theoplayer/v11/examples/yospace/demo.html b/theoplayer/static/theoplayer/v11/examples/yospace/demo.html
new file mode 100644
index 000000000000..31ab6c90f93e
--- /dev/null
+++ b/theoplayer/static/theoplayer/v11/examples/yospace/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Yospace SSAI</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Noto Sans', sans-serif;
+        font-size: 14px;
+      }
+
+      theoplayer-default-ui:not(:defined) {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+
+      theoplayer-default-ui {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        font-family: 'Noto Sans', sans-serif;
+        background: #000;
+      }
+    </style>
+    <!--
+      The Yospace Ad Management SDK (3.10.0 or newer) defines the YospaceAdManagement global.
+      Get the SDK from Yospace and host it yourself in production.
+    -->
+    <script src="https://cdn.theoplayer.com/demos/yospace/admanagement-sdk-3.11.3.min.js"></script>
+    <!-- THEOplayer library and Open Video UI. For production use, host these yourself. -->
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
+    <script type="module" src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
+    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2"></script>
+    <!-- The Yospace connector. For production use, install @theoplayer/yospace-connector-web from npm. -->
+    <script src="https://unpkg.com/@theoplayer/yospace-connector-web@3.0.0/dist/yospace-connector.umd.js"></script>
+  </head>
+  <body>
+    <!--
+      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
+      licenseUrl: Point this to your license file, or replace it with a license property.
+    -->
+    <theoplayer-default-ui
+      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
+    ></theoplayer-default-ui>
+
+    <script src="../utils.js"></script>
+    <script>
+      // Yospace validation streams. The ad breaks are stitched into these streams by the Yospace server.
+      const streams = {
+        dash: {
+          src: 'https://csm-e-sdk-validation-eb.bln1.yospace.com/csm/extlive/yosdk02,dash-mp4-pre.mpd?yo.br=false&yo.av=5&yo.lpa=dur',
+          streamType: 'livepause',
+        },
+        hls: {
+          src: 'https://csm-e-sdk-validation-eb.bln1.yospace.com/csm/extlive/yosdk02,hls-ts-pre.m3u8?yo.av=5',
+          streamType: 'live',
+        },
+        hlsPause: {
+          src: 'https://csm-e-sdk-validation-eb.bln1.yospace.com/csm/extlive/yosdk02,hls-ts-pre.m3u8?yo.br=false&yo.av=5&yo.lpa=dur',
+          streamType: 'livepause',
+        },
+      };
+
+      const events = [];
+
+      function addLogLine(event, details = '') {
+        events.unshift({ time: new Date().toLocaleTimeString(), event, details });
+        sendToParent('yospace-events', { events: events.slice(0, 100) });
+      }
+
+      function setAdBreak(adBreak) {
+        sendToParent('yospace-adbreak', { adBreak });
+      }
+
+      onPlayerReady((player) => {
+        const yospace = new THEOplayerYospaceConnector.YospaceConnector(player);
+
+        async function loadStream(name) {
+          const stream = streams[name];
+          sendToParent('yospace-stream', { stream: name, loading: true });
+          setAdBreak(null);
+          addLogLine('session', `Setting up a Yospace session (${stream.streamType})`);
+          player.autoplay = true;
+          try {
+            // The connector creates a Yospace session and sets the stream it returns as the player source.
+            await yospace.setupYospaceSession({
+              sources: [
+                {
+                  src: stream.src,
+                  ssai: {
+                    integration: 'yospace',
+                    streamType: stream.streamType,
+                  },
+                },
+              ],
+            });
+            addLogLine('session', 'Yospace session ready');
+          } catch (error) {
+            addLogLine('session', `Yospace session failed: ${error.message ?? error}`);
+          } finally {
+            sendToParent('yospace-stream', { stream: name, loading: false });
+          }
+        }
+
+        // The connector reports the stitched ad breaks and ads through the player's ads API.
+        player.ads.addEventListener(['addadbreak', 'removeadbreak'], (event) => {
+          addLogLine(event.type, `Ad break at ${event.adBreak.timeOffset} s`);
+        });
+        player.ads.addEventListener('adbreakbegin', (event) => {
+          setAdBreak({ ads: event.adBreak.ads.length, timeOffset: event.adBreak.timeOffset });
+          addLogLine(event.type);
+        });
+        player.ads.addEventListener('adbreakend', (event) => {
+          setAdBreak(null);
+          addLogLine(event.type);
+        });
+        player.ads.addEventListener(['adbegin', 'adend'], (event) => {
+          addLogLine(event.type, `Ad ${event.ad.id ?? ''} (${event.ad.duration ?? '?'} s)`);
+        });
+        player.addEventListener('error', (event) => {
+          addLogLine(event.type, event.errorObject?.message ?? 'unknown');
+        });
+
+        onParentMessage('yospace-stream', ({ stream }) => loadStream(stream));
+
+        loadStream('hls');
+      });
+    </script>
+  </body>
+</html>
diff --git a/theoplayer/ui/web/change-video-fit.mdx b/theoplayer/ui/web/change-video-fit.mdx
index 6944f210d054..9bfeb18a9c44 100644
--- a/theoplayer/ui/web/change-video-fit.mdx
+++ b/theoplayer/ui/web/change-video-fit.mdx
@@ -13,6 +13,25 @@ import Intro from '../shared/_change-video-fit-intro.mdx';
 
 The CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property serves this use-case.
 
+### Open Video UI
+
+Set the `--theoplayer-video-object-fit` CSS custom property on the UI element.
+
+```css
+theoplayer-default-ui {
+  --theoplayer-video-object-fit: contain; /* default */
+  /* --theoplayer-video-object-fit: cover; // content outside of the player is cut off */
+  /* --theoplayer-video-object-fit: fill; // all content is inside the player, but it might be deformed */
+}
+```
+
+```javascript
+const ui = document.querySelector('theoplayer-default-ui');
+ui.style.setProperty('--theoplayer-video-object-fit', 'cover');
+```
+
+### Default UI
+
 ```css
 .theoplayer-skin video {
   object-fit: contain; /* default */
@@ -40,3 +59,5 @@ for (let i = 0; i < videos.length; i++) {
   videos[i].style.objectFit = 'cover';
 }
 ```
+
+See the [Video fit](../../examples/ui/09-video-fit.mdx) example for a working demo.