Developer Enables 360° VR Video Playback in Drupal Using A-Frame.js

Drupal developers can now deliver immersive 360-degree video experiences directly in the browser, thanks to a new integration method by George Bonnici that combines A-Frame.js with Drupal’s custom field formatting system. The setup works without a VR headset, supports autoplay and looping, and is compatible with most devices.

The implementation relies on A-Frame.js, a WebVR framework that renders interactive VR environments using HTML-style components. Bonnici’s custom field formatter converts standard video URLs into embedded 360° scenes, supporting both link and string field types for flexible content management.

Users interact with the video sphere using mouse, touch, or headset controls. The video player is optimized for responsive display and includes key attributes like autoplay, mute, and inline playback to accommodate mobile platforms—including iOS, which traditionally limits VR functionality.

To activate the feature, developers create a custom module (vr_embed), load A-Frame.js via CDN or local assets, and configure the field formatter on their chosen content type. Editors can then input or upload a compatible 360° video file, which is rendered in a <a-videosphere> tag within the page.

A known limitation affects iOS Safari, which blocks full-screen video playback triggered via JavaScript. Bonnici notes that adding the site to a user’s Home Screen as a Progressive Web App (PWA) allows full-screen functionality on iOS, providing a workaround for that platform.

Performance considerations include compressing video files, using compatible formats such as MP4 or WebP, implementing lazy loading, and serving content via CDNs to reduce load times. Bonnici also recommends adding loading indicators and fallback instructions for a smoother user experience.

Full implementation details and source code are available on Bonnici’s blog at bonnici.co.nz.