Is there a best practice for setting the height of a Play Canvas Iframe to take up 100% of the remaining page? Our setup is a self-hosted React app using an iframe.
I tried using iframe-resizer-react but it doesn’t work. My guess is because it’s not designed for working with the WebGL Canvas.
The content of the iframe (PlayCanvas or not) cannot affect the parent page’s layout/styling etc.
What’s the issue you are running into?
The content of the iframe (PlayCanvas or not) cannot affect the parent page’s layout/styling etc.
Just like the content in an IFrame can communicate with the parent page - such as with a Play Canvas communicating with the containing app using Window messages - the content in an IFrame can communicate the containing page and the containing page can adjust the size of the IFrame. The linked library does something like this, although I didn’t dive into the mechanism.
But our problem is this: we have a React app that provides the header of the site but then we want the remaining space to be filled with the Play Canvas app. And that size is variable as we need to serve all desktop and mobile sizes.
Alternately, we’d be happier not to use an IFrame at all. But I haven’t been able to find any documentation or working examples of this. Is this possible?
It can communicate via postMessage but the child cannot directly affect the parent page.
It requires a little bit of extra setup from the published build but is possible.
This thread has the details: Embedding PlayCanvas into a webpage without iframe - #26 by Cheburashka