# Virtual reality (360°)
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
| `vr.state` | - |
| -------------------- | - |
| `vr.stereo` | - |
| `vr.direction.yaw` | - |
| `vr.direction.pitch` | - |
| `vr.direction.roll` | - |
| `vr.verticalFOV` | - |
| `vr.canPresentVR` | - |
This example plays a 360° video. To mark a source as a 360° video, set `vr: { 360: true }` on the source description. Drag the video (or move your phone) to look around.
The box below the player reports the values of the [VR API](https://docs-preview.optiview.dolby.com/pr-894/theoplayer/v11/api-reference/web/interfaces/VR). They are updated using the `directionchange`, `stereochange` and `statechange` events of `player.vr`. Stereo mode is toggled with the button in the player's control bar, which only appears when `player.vr.canPresentVR` is true (for example, when a WebXR device such as a VR headset is available). Entering an immersive WebXR session must be triggered by a user gesture inside the player's page.
Code
demo.html
```html
Virtual reality (360°)Stereo
```