Search code examples
iframereact-360

React-VR iFrame Fullscreen

Creating a React-VR app that I need to iFrame into an existing app. My question is regarding the fullscreen button. How can i either hide this button and manage within my other app or send a message to the parent that the button was clicked?

Solution

  • Couldn't find any official documentation for this but if you look at the implementation of VRInstance you'll notice a hideFullscreen option that hides that button.

    // vr/client.js
const vr = new VRInstance(bundle, 'VRTEST', parent, {
  hideFullscreen: true,
  ...options,
});

    To toggle fullscreen mode for an iframe you can use a library like screenfull.js so you don't have to worry about the various cross-browser implementation details of the Fullscreen API.

    Just render a button in your page and make it toggle fullscreen mode for a DOM element on click.

    const vrIframe = document.getElementById('vrIframe');

document.getElementById('vrFullscreenButton').addEventListener('click', () => {
  if (screenfull.enabled) {
    screenfull.request(vrIframe);
  }
});