5

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?

Jose A
  • 10,053
  • 11
  • 75
  • 108
ngokevin
  • 12,980
  • 2
  • 38
  • 84

2 Answers2

7

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

Jose A
  • 10,053
  • 11
  • 75
  • 108
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Hi @ngokevin, I am actively trying to develop an web player using aframe with our system. I really appreciate this solution for iOS you mentioned. It does not worked for me. I got: "Blocked attempt add device motion or orientation listener from child frame that wasn't the same security origin as the main page." I searched on this and found some other discussion: https://github.com/googlevr/vrview/issues/31. Did you have it working for IOS Safari? Could you advice? Thank you so much! – Fei Jun 15 '17 at 22:39
  • Device motion on iOS no longer works with I-Frame without workarounds. – ngokevin Mar 29 '18 at 08:26
1

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>
Samuel Philipp
  • 10,631
  • 12
  • 36
  • 56
Steve
  • 11
  • 1