Back to the Shapespark home page

Full-page Shapespark iframe


#1

For interested, we are sharing a code example on how to embed a Shapespark scene so that it fills the entire parent web page and correctly responds to mobile device orientation changes.

The code is a result of investigation of an issue reported by a user, who was facing Shapespark iframe responsiveness problems on their own web page.

<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Visualization</title>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <iframe src="https://demo.shapespark.com/example-room"
            scrolling="no" allowfullscreen allow="gyroscope; accelerometer; vr">
    </iframe>
  </body>
</html>


Hide interface elements on mobile
#2

I’ve updated the code in my first post, because the first version had some issues on mobile browsers.


#3

One thing to note about embedding Shapespark iframes is that mobile Firefox and mobile Safari do not allow a cross-origin iframe to access device sensors like gyroscope and accelerometer. So, the VR mode is not working in these browers if the parent website has different origin (protocol + domain + port) from the Shapespark scene. Hopefully, this will change in the future, as Firefox and Safari start supporting whitelisting features in the allow attribute of an iframe.


#4

thanks for updating the code Wojciech. I am facing two issues right now-
1- there is a performance loss in vrmode(comparably slow) when the shapespark link is iframed onto our server when viewed on android mobile.
2- On my iphone 6s, there is no vr button visible on iframed link even in Google Chrome.

Did anyone else report the same issues?


#5
  1. It looks as if the VR iframe is running in emulated mode (via webvr-polyfill). Could you check these three things?
    • Are you using HTTPS protocol for both the parent website and the iframe?
    • Do you have the allow="vr" iframe attribute set?
    • Do you have WebVR support enabled in chrome://flags?
  2. Sorry, I was imprecise in my previous post: Not only Safari, but all iOS browsers do not allow a cross-origin iframe to access device sensors like gyroscope and accelerometer. So, on iOS, there is no orientation tracking in VR for a cross-origin iframe. The only way for VR orientation tracking to work in on iOS and Firefox/Android is to use the same origin for the parent website and the iframe.