Embed 360° and VR Videos That Visitors Can Actually Explore
The 360° & VR Video module extends HTML5 Video Player Pro, so you can add 360° and VR videos anywhere on your site in a few clicks. Visitors drag to look around, tilt their phone, or slide on a VR headset to step into the scene.
Why Your Videos Need a 360° View
A flat video shows one angle. A 360° video lets visitors choose their own, drag to look around, tilt their phone, or slip on a headset. That kind of control keeps people watching longer, whether it’s a property tour, an event recap, or a product demo.
What Your Visitors Get
- Drag-to-look-around control on desktop and touch-swipe panning on mobile
- Real-time gyroscope tracking that follows the tilt of their phone or tablet
- One-click Cardboard VR split-screen view for headsets and mobile VR viewers
- Smooth playback across 360°, 180°, and stereoscopic formats without lag
What You Get as a Site Owner
- A native Gutenberg block built specifically for 360° video, no third-party plugin needed
- Full control over which players show the VR toggle or gyroscope tracking
- Reusable players you can drop anywhere with a single shortcode
- Password protection for private videos and automatic access control for drafts
Add 360° Video Using a Handy Gutenberg Block
Insert a dedicated 360° Video block into any post or page. Upload your video, pick a poster image, choose your projection, and set autoplay, loop, mute, and aspect ratio. The editor shows a static preview, so your admin screen stays fast. Switch an existing video block to 360° in one click.
Play Every 360° and VR Format Without Extra Plugins
Not all 360° video works the same way, and this module doesn’t lock you into one format. It plays 360° monoscopic, stereoscopic left/right and top/bottom, 180° video, and EAC, the format YouTube and Google use for sharper 360° playback. Whatever your camera exports, it plays correctly.
Give Viewers Real Control Over Their Experience
Viewers drag and swipe to look around on desktop and mobile, and the gyroscope takes over automatically on phones and tablets. Turn on Cardboard VR mode and viewers get a one-click split-screen view built for VR goggles. You decide, per player, whether these controls show up at all.
Build a Player Once, Reuse It Everywhere
Save a 360° player under HTML5 Video Player → 360° Videos and reuse it anywhere with a simple shortcode: [h5vp_360 id=X]. It works in the classic editor, in widgets, and inside Elementor, Divi, Beaver Builder, or WPBakery. Password-protect a player, or keep drafts hidden from visitors.
Stream 360° Video From Any Source
Self-hosted MP4, WebM, and OGG files play without issue. For live or on-demand streaming, the module handles HLS and DASH through the built-in Video.js VHS engine, and it works alongside URL obfuscation. Cross-origin sources get the right CORS headers automatically, so WebGL textures never break.
Smarter 360° Video Player That Looks Great and Just Works
Turn Any Video Block Into a 360° Player
Add a class like h5vp-360, h5vp-360-lr, or h5vp-180 to a standard video block’s Additional CSS class field, and it renders as a 360° or 180° player instantly. No dedicated block required.
Your Filenames Stay Safe
Naming a file “360-tour.mp4” doesn’t turn it into a 360° video on its own. You choose the class or the block yourself, so a regular flat video never renders as immersive by accident.
Only Loads Where You Need It
360° video is heavy by nature, so the module loads its scripts only on pages that use a 360° player. Every other page on your site stays untouched and just as fast.
Assets Cache Instead of Reloading
Video.js and videojs-vr get copied into your uploads folder so browsers cache them long-term. If that folder isn’t writable, the module loads assets inline automatically, so playback never breaks.
Cleans Up After Itself
When a 360° player gets removed from the page, closing a popup or navigating an AJAX site, the module clears the WebGL context and removes device orientation listeners. No memory leaks building up.
Plays Well With Other Plugins
The module uses priority-based takeover so it doesn’t conflict with other WebGL plugins, while iframe embeds like YouTube or Vimeo still degrade gracefully on the same page.
FAQs
Save 90%