diff --git a/.changeset/ten-snakes-exist.md b/.changeset/ten-snakes-exist.md
new file mode 100644
index 00000000..18fedd08
--- /dev/null
+++ b/.changeset/ten-snakes-exist.md
@@ -0,0 +1,6 @@
+---
+'@theoplayer/react-ui': minor
+'@theoplayer/web-ui': minor
+---
+
+Added 360°/VR support: `<theoplayer-vr-button>` and `<theoplayer-vr-compass>`, included by default in `<theoplayer-default-ui>`.
diff --git a/examples/default-ui.html b/examples/default-ui.html
index 6c00b9b0..96a1299b 100644
--- a/examples/default-ui.html
+++ b/examples/default-ui.html
@@ -21,6 +21,11 @@
                 background: #000;
             }
         </style>
+        <!-- WebXR polyfill: enables Cardboard VR on desktop and older mobile devices. -->
+        <script src="https://cdn.theoplayer.com/webxr/webxr-polyfill-patched.js"></script>
+        <script>
+            new WebXRPolyfill({ allowCardboardOnDesktop: true });
+        </script>
         <!-- Modern browsers -->
         <script type="importmap">
             {
@@ -69,6 +74,7 @@ <h1>Default UI</h1>
                     <option value="bigBuckBunny" selected>Big Buck Bunny</option>
                     <option value="elephantsDream">Elephant's Dream</option>
                     <option value="starWarsTrailer">Star Wars Episode VII Trailer</option>
+                    <option value="vr">National Geographic (VR)</option>
                 </select>
             </label>
         </div>
@@ -116,6 +122,15 @@ <h1>Default UI</h1>
                         title: 'Star Wars Episode VII Trailer'
                     },
                     poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg'
+                },
+                vr: {
+                    sources: {
+                        src: 'https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8'
+                    },
+                    vr: {
+                        360: true
+                    },
+                    poster: 'https://demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg'
                 }
             };
 
diff --git a/examples/locale/nl.js b/examples/locale/nl.js
index 841fc083..170f756b 100644
--- a/examples/locale/nl.js
+++ b/examples/locale/nl.js
@@ -17,6 +17,9 @@ addLocale('nl', {
     seekToLiveAria: 'spring naar live',
     fullscreenAria: 'volledig scherm',
     fullscreenExitAria: 'volledig scherm sluiten',
+    vrAria: 'bekijk in VR',
+    vrExitAria: 'stop met bekijken in VR',
+    vrUnavailableAria: 'geen VR-compatibel apparaat gevonden',
     airplayAria: 'start met afspelen op AirPlay',
     airplayConnectedAria: 'stop met afspelen op AirPlay',
     chromecastAria: 'start met afspelen op Chromecast',
diff --git a/examples/react/default-ui.html b/examples/react/default-ui.html
index 2f2b1692..1fdf1d6e 100644
--- a/examples/react/default-ui.html
+++ b/examples/react/default-ui.html
@@ -29,6 +29,11 @@
                 line-height: 24px;
             }
         </style>
+        <!-- WebXR polyfill: enables Cardboard VR on desktop and older mobile devices. -->
+        <script src="https://cdn.theoplayer.com/webxr/webxr-polyfill-patched.js"></script>
+        <script>
+            new WebXRPolyfill({ allowCardboardOnDesktop: true });
+        </script>
         <script type="importmap">
             {
                 "imports": {
@@ -108,6 +113,16 @@
                         title: 'Star Wars Episode VII Trailer'
                     },
                     poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg'
+                },
+                vr: {
+                    sources: {
+                        src: 'https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8'
+                    },
+                    metadata: { title: 'VR' },
+                    vr: {
+                        360: true
+                    },
+                    poster: 'https://demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg'
                 }
             };
             const languages = {
diff --git a/package-lock.json b/package-lock.json
index dfdb023b..df021b4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@theoplayer/web-ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@theoplayer/web-ui",
-      "version": "2.1.1",
+      "version": "2.2.0",
       "license": "MIT",
       "workspaces": [
         ".",
@@ -44,7 +44,7 @@
         "rollup-plugin-string": "^3.0.0",
         "rollup-plugin-swc3": "^0.12.1",
         "serve": "^14.2.6",
-        "theoplayer": "^11.0.0",
+        "theoplayer": "^11.4.0",
         "tslib": "^2.8.1",
         "typedoc": "^0.28.19",
         "typedoc-plugin-mdn-links": "^5.1.1",
@@ -9945,9 +9945,9 @@
       }
     },
     "node_modules/theoplayer": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-11.0.0.tgz",
-      "integrity": "sha512-pxjpNtd++m87H5ndEPlNbKpHhXCNbFDgnXB0g6RfTv/v7zSpSLwiB0F0vIJe5asaqEJ6pKH7kvpTgnaEN2TElw==",
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/theoplayer/-/theoplayer-11.4.0.tgz",
+      "integrity": "sha512-LJEXxDOW41NWM62dyj/4coc1a5jksriFXTGCuGVV+x31DGiAffHdhUBJo7So7wsvMzsoBTzuZZF6Ei/FsIFYJA==",
       "dev": true,
       "license": "SEE LICENSE AT https://www.theoplayer.com/terms"
     },
@@ -10478,11 +10478,11 @@
     },
     "react": {
       "name": "@theoplayer/react-ui",
-      "version": "2.1.1",
+      "version": "2.2.0",
       "license": "MIT",
       "dependencies": {
         "@lit/react": "^1.0.8",
-        "@theoplayer/web-ui": "^2.1.1"
+        "@theoplayer/web-ui": "^2.2.0"
       },
       "devDependencies": {
         "@rollup/plugin-json": "^6.1.0",
diff --git a/package.json b/package.json
index f2d77955..57e909ed 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-swc3": "^0.12.1",
     "serve": "^14.2.6",
-    "theoplayer": "^11.0.0",
+    "theoplayer": "^11.4.0",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.19",
     "typedoc-plugin-mdn-links": "^5.1.1",
diff --git a/react/src/components/VRButton.tsx b/react/src/components/VRButton.tsx
new file mode 100644
index 00000000..00c91353
--- /dev/null
+++ b/react/src/components/VRButton.tsx
@@ -0,0 +1,17 @@
+import { createComponent } from '@lit/react';
+import { VRButton as VRButtonElement } from '@theoplayer/web-ui';
+import * as React from 'react';
+import { ButtonEvents } from './Button';
+
+/**
+ * See {@link @theoplayer/web-ui!VRButton | VRButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+export const VRButton = createComponent({
+    tagName: 'theoplayer-vr-button',
+    displayName: 'VRButton',
+    elementClass: VRButtonElement,
+    react: React,
+    events: ButtonEvents
+});
diff --git a/react/src/components/VRCompass.tsx b/react/src/components/VRCompass.tsx
new file mode 100644
index 00000000..39d4be77
--- /dev/null
+++ b/react/src/components/VRCompass.tsx
@@ -0,0 +1,15 @@
+import { createComponent } from '@lit/react';
+import { VRCompass as VRCompassElement } from '@theoplayer/web-ui';
+import * as React from 'react';
+
+/**
+ * See {@link @theoplayer/web-ui!VRCompass | VRCompass in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+export const VRCompass = createComponent({
+    tagName: 'theoplayer-vr-compass',
+    displayName: 'VRCompass',
+    elementClass: VRCompassElement,
+    react: React
+});
diff --git a/react/src/components/index.ts b/react/src/components/index.ts
index f6156b64..3031a4c7 100644
--- a/react/src/components/index.ts
+++ b/react/src/components/index.ts
@@ -32,6 +32,8 @@ export * from './TextTrackStyleMenu';
 export * from './SettingsMenu';
 export * from './SettingsMenuButton';
 export * from './FullscreenButton';
+export * from './VRButton';
+export * from './VRCompass';
 export * from './Range';
 export * from './TimeRange';
 export * from './VolumeRange';
diff --git a/src/DefaultUI.css b/src/DefaultUI.css
index 3192d960..6eac07e7 100644
--- a/src/DefaultUI.css
+++ b/src/DefaultUI.css
@@ -55,6 +55,15 @@ theoplayer-ui {
     pointer-events: none;
 }
 
+/* Place the VR compass in the top-right corner by default (can be overridden). */
+[part='middle-chrome'] theoplayer-vr-compass {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    margin: 0.5em;
+}
+
 [part='bottom-chrome'] {
     position: relative;
     display: flex;
diff --git a/src/DefaultUI.ts b/src/DefaultUI.ts
index b4c48b4f..583a28b8 100644
--- a/src/DefaultUI.ts
+++ b/src/DefaultUI.ts
@@ -410,6 +410,7 @@ export class DefaultUI extends LitElement {
             </div>
             <div slot="middle-chrome" part="middle-chrome">
                 <theoplayer-chromecast-display></theoplayer-chromecast-display>
+                <theoplayer-vr-compass></theoplayer-vr-compass>
             </div>
             <div part="bottom-chrome">
                 <theoplayer-control-bar part="ad-chrome" ad-only>
@@ -446,6 +447,7 @@ export class DefaultUI extends LitElement {
                     <theoplayer-airplay-button tv-hidden mobile-hidden ad-hidden></theoplayer-airplay-button>
                     <theoplayer-chromecast-button tv-hidden mobile-hidden ad-hidden></theoplayer-chromecast-button>
                     <slot name="bottom-control-bar"></slot>
+                    <theoplayer-vr-button tv-hidden ad-hidden></theoplayer-vr-button>
                     <theoplayer-settings-menu-button menu="settings-menu" mobile-hidden ad-hidden></theoplayer-settings-menu-button>
                     <theoplayer-fullscreen-button part="fullscreen-button" tv-hidden></theoplayer-fullscreen-button>
                 </theoplayer-control-bar>
diff --git a/src/UIContainer.ts b/src/UIContainer.ts
index 5d212736..e0f1faf1 100644
--- a/src/UIContainer.ts
+++ b/src/UIContainer.ts
@@ -23,7 +23,7 @@ import { ENTER_FULLSCREEN_EVENT, type EnterFullscreenEvent } from './events/Ente
 import { EXIT_FULLSCREEN_EVENT, type ExitFullscreenEvent } from './events/ExitFullscreenEvent';
 import { fullscreenAPI } from './util/FullscreenUtils';
 import { Attribute } from './util/Attribute';
-import { isMobile, isTv } from './util/Environment';
+import { isIOS, isMobile, isTv } from './util/Environment';
 import { Rectangle } from './util/GeometryUtils';
 import { PREVIEW_TIME_CHANGE_EVENT, type PreviewTimeChangeEvent } from './events/PreviewTimeChangeEvent';
 import type { StreamType } from './util/StreamType';
@@ -840,6 +840,10 @@ export class UIContainer extends LitElement {
     private readonly _onEnterFullscreen = (rawEvent: Event): void => {
         const event = rawEvent as EnterFullscreenEvent;
         event.stopPropagation();
+        this._enterFullscreen();
+    };
+
+    private _enterFullscreen(): void {
         if (fullscreenAPI && document[fullscreenAPI.fullscreenEnabled_] && this[fullscreenAPI.requestFullscreen_]) {
             const promise = this[fullscreenAPI.requestFullscreen_]({
                 navigationUI: 'hide',
@@ -856,11 +860,15 @@ export class UIContainer extends LitElement {
             window.addEventListener('keydown', this._exitFullscreenOnEsc);
             this._onFullscreenChange();
         }
-    };
+    }
 
     private readonly _onExitFullscreen = (rawEvent: Event): void => {
         const event = rawEvent as ExitFullscreenEvent;
         event.stopPropagation();
+        this._exitFullscreen();
+    };
+
+    private _exitFullscreen(): void {
         if (fullscreenAPI) {
             const promise = document[fullscreenAPI.exitFullscreen_]();
             if (promise && promise.then) {
@@ -876,6 +884,31 @@ export class UIContainer extends LitElement {
             window.removeEventListener('keydown', this._exitFullscreenOnEsc);
             this._onFullscreenChange();
         }
+    }
+
+    /**
+     * On iOS, presenting stereoscopic VR requires the player to fill the screen.
+     */
+    private _vrFullscreen: boolean = false;
+    private _vrWasFullscreen: boolean = false;
+
+    private readonly _onVrStateChange = (): void => {
+        if (!isIOS()) {
+            return;
+        }
+        const presenting = this._player?.vr?.state === 'presenting';
+        if (presenting && !this._vrFullscreen) {
+            this._vrFullscreen = true;
+            this._vrWasFullscreen = this.fullscreen;
+            if (!this.fullscreen) {
+                this._enterFullscreen();
+            }
+        } else if (!presenting && this._vrFullscreen) {
+            this._vrFullscreen = false;
+            if (!this._vrWasFullscreen) {
+                this._exitFullscreen();
+            }
+        }
     };
 
     private readonly _onFullscreenChange = (): void => {
@@ -969,9 +1002,6 @@ export class UIContainer extends LitElement {
             if (streamType) {
                 return streamType;
             }
-            if (source?.dvr) {
-                return 'dvr';
-            }
             // Assume VOD.
             return 'vod';
         } else if (duration === Infinity) {
@@ -1251,6 +1281,7 @@ export class UIContainer extends LitElement {
         player.videoTracks.addEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
         player.cast?.addEventListener('castingchange', this._updateCasting);
         player.ads?.addEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+        player.vr?.addEventListener('statechange', this._onVrStateChange);
     }
 
     private removePlayerListeners_(player: ChromelessPlayer): void {
@@ -1271,6 +1302,7 @@ export class UIContainer extends LitElement {
             player.videoTracks.removeEventListener(['addtrack', 'removetrack', 'change'], this._updateActiveVideoTrack);
             player.cast?.removeEventListener('castingchange', this._updateCasting);
             player.ads?.removeEventListener(['adbreakbegin', 'adbreakend', 'adbegin', 'adend', 'adskip'], this._updatePlayingAd);
+            player.vr?.removeEventListener('statechange', this._onVrStateChange);
         } catch {
             // Ignore errors from accessing player.ads when the player is already destroyed.
         }
diff --git a/src/components/GestureReceiver.ts b/src/components/GestureReceiver.ts
index 9996ea0e..69c5a6ab 100644
--- a/src/components/GestureReceiver.ts
+++ b/src/components/GestureReceiver.ts
@@ -85,6 +85,11 @@ export class GestureReceiver extends LitElement {
                 // Clicking during a linear ad should open the ad's clickthrough URL instead.
                 return;
             }
+            if (this._player.vr && this._player.vr.state !== 'unavailable') {
+                // While VR is active, mouse drags are used to look around the 360° video,
+                // so a click should not toggle play/pause.
+                return;
+            }
             if (this._player.paused) {
                 this._player.play();
             } else {
diff --git a/src/components/PlayButton.ts b/src/components/PlayButton.ts
index 40dd466d..030aff57 100644
--- a/src/components/PlayButton.ts
+++ b/src/components/PlayButton.ts
@@ -108,6 +108,10 @@ export class PlayButton extends Button {
             } else {
                 this._player.pause();
             }
+            const vr = this._player.vr;
+            if (vr !== undefined && vr.state !== 'unavailable') {
+                vr.useDeviceMotionControls = true;
+            }
         }
     }
 
diff --git a/src/components/VRButton.css b/src/components/VRButton.css
new file mode 100644
index 00000000..536dd34e
--- /dev/null
+++ b/src/components/VRButton.css
@@ -0,0 +1,10 @@
+/*
+ * When no VR capable device is available, the button is disabled/greyed out.
+ */
+:host([disabled]) svg,
+:host([disabled]) img,
+:host([disabled]) ::slotted(svg),
+:host([disabled]) ::slotted(img) {
+    color: var(--theoplayer-button-disabled-text-color, #ccc);
+    opacity: var(--theoplayer-vr-button-disabled-icon-opacity, 0.5);
+}
diff --git a/src/components/VRButton.ts b/src/components/VRButton.ts
new file mode 100644
index 00000000..b35babd5
--- /dev/null
+++ b/src/components/VRButton.ts
@@ -0,0 +1,103 @@
+import { html, type HTMLTemplateResult, type PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import { Button } from './Button';
+import vrButtonCss from './VRButton.css';
+import vrIcon from '../icons/vr.svg';
+import { stateReceiver } from './StateReceiverMixin';
+import { Attribute } from '../util/Attribute';
+import { getLocale } from '../i18n';
+
+const VR_EVENTS = ['statechange', 'stereochange'] as const;
+
+/**
+ * A button that toggles stereoscopic VR mode.
+ *
+ * The button is only shown when the current source supports VR (e.g. a 360° video),
+ * and is disabled when the device cannot present VR content.
+ */
+@customElement('theoplayer-vr-button')
+@stateReceiver(['player', 'lang'])
+export class VRButton extends Button {
+    static styles = [...Button.styles, vrButtonCss];
+
+    private _player: ChromelessPlayer | undefined;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        this._updateFromPlayer();
+        this._updateAriaLabel();
+    }
+
+    get player(): ChromelessPlayer | undefined {
+        return this._player;
+    }
+
+    @property({ reflect: false, attribute: false })
+    set player(player: ChromelessPlayer | undefined) {
+        if (this._player === player) {
+            return;
+        }
+        this._player?.vr?.removeEventListener(VR_EVENTS, this._updateFromPlayer);
+        this._player = player;
+        this._player?.vr?.addEventListener(VR_EVENTS, this._updateFromPlayer);
+        this._updateFromPlayer();
+    }
+
+    /**
+     * Whether stereoscopic VR mode is currently active.
+     */
+    @property({ reflect: true, type: Boolean, attribute: Attribute.STEREO })
+    accessor stereo: boolean = false;
+
+    @property({ reflect: true, type: String, attribute: Attribute.LANG })
+    accessor lang: string = '';
+
+    private readonly _updateFromPlayer = (): void => {
+        const vr = this._player?.vr;
+        if (!vr || vr.state === 'unavailable') {
+            this.stereo = false;
+            this.hidden = true;
+            return;
+        }
+        this.hidden = false;
+        this.disabled = !vr.canPresentVR;
+        this.stereo = vr.stereo;
+    };
+
+    protected override handleClick(): void {
+        const vr = this._player?.vr;
+        if (!vr || !vr.canPresentVR) {
+            return;
+        }
+        vr.stereo = !vr.stereo;
+        this.stereo = vr.stereo;
+    }
+
+    override willUpdate(changedProperties: PropertyValues) {
+        super.willUpdate(changedProperties);
+        this._updateAriaLabel();
+    }
+
+    private _updateAriaLabel(): void {
+        const locale = getLocale(this.lang);
+        if (this.stereo) {
+            this.ariaLabel = locale.vrExitAria;
+        } else if (this.disabled) {
+            this.ariaLabel = locale.vrUnavailableAria;
+        } else {
+            this.ariaLabel = locale.vrAria;
+        }
+    }
+
+    protected override render(): HTMLTemplateResult {
+        return html`<span part="icon"><slot>${unsafeSVG(vrIcon)}</slot></span>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-button': VRButton;
+    }
+}
diff --git a/src/components/VRCompass.css b/src/components/VRCompass.css
new file mode 100644
index 00000000..ffa165d8
--- /dev/null
+++ b/src/components/VRCompass.css
@@ -0,0 +1,72 @@
+:host {
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: middle;
+    pointer-events: none;
+}
+
+:host([hidden]) {
+    display: none !important;
+}
+
+[part='dial'] {
+    position: relative;
+    box-sizing: border-box;
+    font-size: var(--theoplayer-vr-compass-size, 26px);
+    width: 1em;
+    height: 1em;
+    border: 0.025em solid var(--theoplayer-vr-compass-color, #fff);
+    border-radius: 100%;
+}
+
+[part='dial']::before,
+[part='dial']::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+/* Filled circle in center of compass */
+[part='dial']::before {
+    top: 50%;
+    left: 50%;
+    border: 0.075em solid var(--theoplayer-vr-compass-color, #fff);
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+}
+
+/* Pointy arrow above compass */
+[part='dial']::after {
+    top: 0;
+    left: 50%;
+    border-left: 0.1em solid transparent;
+    border-right: 0.1em solid transparent;
+    border-bottom: 0.1em solid var(--theoplayer-vr-compass-color, #fff);
+    transform: translate(-50%, -100%);
+    transform-origin: 50% 100%;
+}
+
+/* Field of view indicator */
+[part='fov'] {
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50%;
+    height: 50%;
+    transform-origin: 100% 100%;
+}
+
+[part='fov']::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    border: 0.35em solid var(--theoplayer-vr-compass-fov-color, rgba(255, 255, 255, 0.75));
+    box-sizing: border-box;
+    border-radius: 100%;
+    transform: skew(10deg);
+}
diff --git a/src/components/VRCompass.ts b/src/components/VRCompass.ts
new file mode 100644
index 00000000..8c291607
--- /dev/null
+++ b/src/components/VRCompass.ts
@@ -0,0 +1,77 @@
+import { html, type HTMLTemplateResult, LitElement } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { ChromelessPlayer } from 'theoplayer/chromeless';
+import { stateReceiver } from './StateReceiverMixin';
+import vrCompassCss from './VRCompass.css';
+
+const VR_EVENTS = ['statechange', 'directionchange'] as const;
+const FOV_SLICE_ANGLE = 80; // degrees
+
+/**
+ * A compass that indicates the current viewing direction of a 360° (VR) video.
+ *
+ * @cssproperty `--theoplayer-vr-compass-size` - The size (diameter) of the compass. Defaults to `26px`.
+ * @cssproperty `--theoplayer-vr-compass-color` - The color of the compass border, center dot and pointer.
+ *   Defaults to `#fff`.
+ * @cssproperty `--theoplayer-vr-compass-fov-color` - The color of the field-of-view indicator.
+ *   Defaults to `rgba(255, 255, 255, 0.75)`.
+ */
+@customElement('theoplayer-vr-compass')
+@stateReceiver(['player'])
+export class VRCompass extends LitElement {
+    static override styles = [vrCompassCss];
+
+    private _player: ChromelessPlayer | undefined;
+
+    @state()
+    private accessor _yaw: number = 0;
+
+    get player(): ChromelessPlayer | undefined {
+        return this._player;
+    }
+
+    @property({ reflect: false, attribute: false })
+    set player(player: ChromelessPlayer | undefined) {
+        if (this._player === player) {
+            return;
+        }
+        if (this._player !== undefined) {
+            this._player.vr?.removeEventListener(VR_EVENTS, this._updateFromPlayer);
+            this._player.removeEventListener('sourcechange', this._updateFromPlayer);
+        }
+        this._player = player;
+        if (this._player !== undefined) {
+            this._player.vr?.addEventListener(VR_EVENTS, this._updateFromPlayer);
+            this._player.addEventListener('sourcechange', this._updateFromPlayer);
+        }
+        this._updateFromPlayer();
+    }
+
+    private readonly _updateFromPlayer = (): void => {
+        const vr = this._player?.vr;
+        // Like the classic UI, only show the compass for non-native 360° VR sources.
+        // Native VR sources are rendered by the platform, so there's no JS viewing direction.
+        if (!vr || vr.state === 'unavailable' || this._player?.source?.vr?.nativeVR) {
+            this.hidden = true;
+            return;
+        }
+        this.hidden = false;
+        this._yaw = vr.direction.yaw;
+    };
+
+    protected override render(): HTMLTemplateResult {
+        const transformAngle = -this._yaw + FOV_SLICE_ANGLE / 2;
+        const transformSkew = FOV_SLICE_ANGLE - 90;
+        const fovStyles = {
+            transform: `scale(0.875) rotate(${transformAngle}deg) skew(${transformSkew}deg)`
+        };
+        return html`<div part="dial"><div part="fov" style=${styleMap(fovStyles)}></div></div>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-compass': VRCompass;
+    }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 5f527b0f..0a5a91c7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -32,6 +32,8 @@ export * from './TextTrackStyleMenu';
 export * from './SettingsMenu';
 export * from './SettingsMenuButton';
 export * from './FullscreenButton';
+export * from './VRButton';
+export * from './VRCompass';
 export * from './Range';
 export * from './TimeRange';
 export * from './VolumeRange';
diff --git a/src/i18n/Locale.ts b/src/i18n/Locale.ts
index e7bbcad7..a42b052a 100644
--- a/src/i18n/Locale.ts
+++ b/src/i18n/Locale.ts
@@ -38,7 +38,8 @@ import type {
     TextTrackStyleResetButton,
     TimeDisplay,
     TimeRange,
-    VolumeRange
+    VolumeRange,
+    VRButton
 } from '../components';
 import type { THEOliveDefaultUI } from '../THEOliveDefaultUI';
 
@@ -102,6 +103,18 @@ export interface Locale {
      * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link FullscreenButton} when in fullscreen mode.
      */
     fullscreenExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton}.
+     */
+    vrAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when VR (stereo) mode is active.
+     */
+    vrExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when no VR capable device is available.
+     */
+    vrUnavailableAria: string;
     /**
      * The {@link HTMLElement.ariaLabel | `aria-label`} for an {@link AirPlayButton}.
      */
@@ -457,6 +470,9 @@ export const defaultLocale: Locale = {
     seekToLiveAria: 'seek to live',
     fullscreenAria: 'enter fullscreen',
     fullscreenExitAria: 'exit fullscreen',
+    vrAria: 'watch in VR',
+    vrExitAria: 'stop watching in VR',
+    vrUnavailableAria: 'no VR capable device found',
     airplayAria: 'start playing on AirPlay',
     airplayConnectedAria: 'stop playing on AirPlay',
     chromecastAria: 'start casting to Chromecast',
diff --git a/src/icons/vr.svg b/src/icons/vr.svg
new file mode 100644
index 00000000..cbe82cf8
--- /dev/null
+++ b/src/icons/vr.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M20.74 6H3.21C2.55 6 2 6.57 2 7.28v9.44c0 .71.55 1.28 1.21 1.28h4.79c.52 0 .98-.34 1.14-.83l1.13-3.37c.16-.49.62-.83 1.14-.83h1.1c.52 0 .98.34 1.14.83l1.13 3.37c.16.49.62.83 1.14.83h4.79c.66 0 1.21-.57 1.21-1.28V7.28C21.95 6.57 21.4 6 20.74 6zM7.5 14.62c-1.17 0-2.12-.95-2.12-2.12s.95-2.12 2.12-2.12 2.12.95 2.12 2.12-.95 2.12-2.12 2.12zm9 0c-1.17 0-2.12-.95-2.12-2.12s.95-2.12 2.12-2.12 2.12.95 2.12 2.12-.95 2.12-2.12 2.12z"/></svg>
diff --git a/src/util/Attribute.ts b/src/util/Attribute.ts
index 4ca445ac..6eb4b113 100644
--- a/src/util/Attribute.ts
+++ b/src/util/Attribute.ts
@@ -34,6 +34,7 @@ export enum Attribute {
     REMAINING = 'remaining',
     REMAINING_WHEN_LIVE = 'remaining-when-live',
     SHOW_DURATION = 'show-duration',
+    STEREO = 'stereo',
     SEEK_OFFSET = 'seek-offset',
     MENU = 'menu',
     MENU_OPENED = 'menu-opened',
diff --git a/src/util/Environment.ts b/src/util/Environment.ts
index 3c53df1d..81f168e9 100644
--- a/src/util/Environment.ts
+++ b/src/util/Environment.ts
@@ -24,6 +24,18 @@ export function isMobile(): boolean {
     return /Android|iPhone|iPad|iPod|Mobile Safari|Windows Phone/i.test(userAgent);
 }
 
+export function isIOS(): boolean {
+    if (typeof navigator !== 'object') {
+        return false;
+    }
+    const userAgent = navigator.userAgent;
+    if (!userAgent) {
+        return false;
+    }
+    // iPadOS 13+ reports as "Macintosh", so also detect it via touch support.
+    return /iPad|iPhone|iPod/.test(userAgent) || (/Macintosh/.test(userAgent) && navigator.maxTouchPoints > 1);
+}
+
 export function isTv(): boolean {
     if (typeof navigator !== 'object') {
         return false;