How do I run WebVR content within in an iframe?

Question

I have an A-Frame WebVR scene. I am trying to put it in an iframe.

<iframe src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>

But when I Enter VR, it does not go full screen and render to the VR headset. How can I enable stereoscopic VR in an iframe?

Answer 1

You must set allowvr="yes" on the iframe. If you go to https://aframe.io, you'll see that all the examples are iframed, so you can follow their example.

<iframe allowvr="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>

Note that this does not work well for mobile smartphones yet because mobile browsers like iOS Safari do not allow iframe's access to device orientation and device motion sensors. This could be worked around by post messaging device orientation data to the iframe. This is filed at https://github.com/googlevr/webvr-polyfill/issues/173

Answer 2

Only one <a-scene> can exist on a page. Alternatively, we can use an <iframe> with allowfullscreen="yes" and allowvr="yes":

<iframe allowvr="yes" allowfullscreen="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>