360° Video Player

Embed and play 360° videos using the rooom 360° Video Player — supports gyroscope navigation, VR mode, and customizable controls via URL parameters.

Key Features

• Gyroscope: Navigate by moving the device — uses orientation sensors on mobile
• VR Mode: Compatible with VR headsets via WebXR
• Responsive: Runs on desktop, mobile, and tablet without plugins
• Customizable: Set colors, logo, and controls via URL parameters
• Multiple Formats: Supports monoscopic, horizontal, and vertical 360° video
• Quality Switching: Provide a standard and a high-quality source URL simultaneously
• Embed: Integrate into any website with a single iframe and a source parameter

Getting started

Open the url in your browser and set an 360-degree video file for the GET-parameter source.
https://360player.rooom.io/?source=https://path.to/video.mp4

ExampleTry the 360° player with sample video

Customization

Parameters

Name	Type	Default	Description
source	string	''	REQUIRED URL for 360° video source
sourceHQ	string	''	URL for high quality 360° video source
videoType	string	monoscopic	Video type (monoscopic or horizontal or vertical)
volume	number	1	Sound volume from 0...1
muted	boolean	true	Mute the video initially
loop	boolean	true	Loop video playback
fov	number	45	Field of view (in degree)
rotation	number	180	Initial horizontal rotation (in degree)
sensors	boolean	true	Enable sensor based orientation
vr	boolean	true	Enable vr mode (needs sensors too)
camera	string	free	Default camera mode on startup (free or sensors or vr)
extraPanning	boolean	true	Enable horizontal panning in sensor or vr mode
showLogo	boolean	true	Show Logo
logo	string	''	URL for logo image. Default: rooom logo
logoUrl	string	''	URL for logo link
preview	string	''	URL for preview image
primaryColor	string	''	Hex-code for primary color (eg. 00AEB3). Default: Uses rooom colorscheme
theme	string	light	Force Theme to be light, dark or auto

Embed player

This code snippet can be used to embed the 360-player into other web pages.

<iframe
    id="rooom-360-player"
    title="rooom-viewer"
    frameborder="0"
    allowvr="yes"
    allow="vr"
    allowfullscreen=""
    mozallowfullscreen="true"
    webkitallowfullscreen="true"
    xr; accelerometer; magnetometer; gyroscope; autoplay
    src="https://360player.rooom.io/
        ?source=https://cdn.bitmovin.com/content/assets/playhouse-vr/progressive.mp4
        &ui_color=003245"
>
</iframe>