Yeah , that’s Android and iOS browsers being annoying by hiding the nav bar 
I think there is a easy-ish fix for that.
I’ve added another fix that checks the window size multiple times after a resize event. That seems to do the trick as long as you use the iframe-less publish link as well: https://playcanv.as/e/p/unMfGsVm/ (note the use of the extra /e in the link
Great, when I publish a build for self hosting do I need to do anything special or will it just work?
Thanks
Should just work
Hi I tested this even with iframeless build but when it comes back out of the video, although the resolution of the UI seems to have improved the 3d is offset quite a bit. See image
Have you added my fix that listens to the resize event to your project? (playcanvas-hack.js)
As for the 3D issue, that may be due to 8th Wall still running in the background? I would try disabling the video for 8th Wall and tracking when the video starts and set the whole app back to a known state when the video stops.
Beyond that, you will need to investigate further on what could causing that to happen with 8th Wall and full screen elements.
Disabling /Enabling the XR when it goes into the video as well as increasing the polling time in the fullscreen hack slightly, seems to fix it it in most cases. Good enough 
Thanks!!
Welcome to webdev where every browser has it’s own quirks. I would try increasing the timeout in the full screen hack from 500ms to 2000ms and see if that helps more.
1 Like
Hmm, I’m still having issues with this. I notice that when it returns form the video the url address bar in the browser is gone, at this point the 3d camera is out out scale and there is a small area of space at the bottom of the screen (as in the AFTER video image above). If I then rotate my phone to landscape again and then return to portrait the address bar is back again and the resolution/camera are correct.
Is there a way to force the address bar ON when returning from the video perhaps?
I haven’t found a definitive answer for this online, just hacks and workarounds due to browser/vendor behaviour.
That sounds more like a tracking issue with 8th Wall. Worth asking on their Slack about this scenario. I can’t think of anything on the PlayCanvas side that would affect the rendering after entering and exiting full screen
So far, the only definitive solution I’ve found is to show an alert (example: https://playcanvas.com/editor/scene/1152444)
Otherwise the other route to go down is to wrap the video in a div like a lightbox and full screen that instead but I’m not 100% sure if that would work either 
eg (https://github.com/biati-digital/glightbox)
Here’s a version that uses a DIV as a wrapper around the video: https://playcanvas.com/editor/scene/1152502
This one doesn’t auto rotate the video when fullscreen (user has to manually do this and I don’t think there is anything that can be done on the browsers API to force a rotate) but also doesn’t have the resizing issue when exiting full screen.
Tested on Android and iOS.
Thanks for this. I think the div one is a better user experience, but when I return from the video in this case (using the div version) my XR camera aspect becomes wider than normal which ruins the XR accuracy. This issue only happens if I rotate the device during the video to landscape mode.
I have contacted 8th Wall about this but I’m not hopeful
Is there any way to just prevent the video from rotating into landscape on orientation change? Its not ideal but that would ‘possibly’ fix things.
Not that I know of, it’s a browser behaviour that can be different for each browser. For example, iOS Safari doesn’t rotate the video.
I can’t recreate the perspective widening issue on Android. I assume the steps are:
- Launch video
- Rotate device to landscape
- Rotate device to portrait
- Exit video
As a last resort from my side, try adding this extra logic to the project. https://playcanvas.com/editor/code/795848?tabs=47721655
It’s something that is due for engine 1.42.0 as part of wider refactor but may help here.
I tried this and I’m not really sure if it helps at all…but maybe it does I still get the issue but it doesn’t seem to happen as much.
Is it the camera perspective that is stretched or does it look like the render view is larger than it should be(ie is all the UI in the correct places and not going off the screen)?
Can you reproduce with my project only (ie no 8th Wall)?
Its quite rare now, but when I turn the video to landscape, quit it and the rotate my device to portrait sometimes I am left with the small UI block of space at the bottom of the device. When this block of space exists the AR is messed up.
It’s it reproducible via my project (ie without 8th Wall)?
At the moment, its a matter of trying to get around browser behaviour. So far, the only thing that I’ve seen to force it is to use an alert as shown via this post: Video Texture Sound and Quality
Edit: I think I know what might be causing the issue. I had this problem with another client where the 8th Wall camera element DOM object was overhanging the full screen page causing a small gap. This could be related.
Can you add the following code to an initialisation function call script somewhere please?
this.app.on('xr:realityready', function() {
var cameraDom = document.getElementById('camerafeed');
cameraDom.style.position = 'absolute';
cameraDom.style.top = '0px';
}, this);