iframe scrolling on mobile

[drites]

Hi!

We have a client who has his Pano2VR tour as an iframe (they can't use packages or CMS because they are using a Headless CMS system) in their mobile web. The issue is that the iframe is almost 100% width and 80% height by design, so when a final user wants to scroll through the page, they got stuck on the tour (in this case is only 180º panoramas, but they have some other tours with 360º).

They only scroll from the navbar, so they are getting masive exit rate on this page because of user frustation.

Below in the same page, there is an Google Maps Javascript div, which uses a parameter named Cooperative Gesture Handling that solves the unintentional interaction with the component.

I have tried a little prototype with CSS: touch-action but I didn't work. Another option that have tried is to disable the Scroll bar interaction in Pano2VR and get the Sensibility to the minimum but it's the same behavior.

How we can solve this issue? Maybe with a top layer that we have to click to "start" the Pano2VR? I can't control my client HTML, so all the changes have to be made on my HTML package from P2VR.

Thanks in advance, best regards.

[drites]

Hi, anyone has any guideline for this?

I am trying a solution that I've seen in another Tour solutions, with an intermediate static frame with a play button to start the tour, but I'm getting all the mouse attention as well...

Best regards,

[Hopki]

Hi drites,
There are a few thoughts on this.
Firstly don't make the panorama viewport too wide so you can still scoll using the web page.
Or you could put active containers on either side of the skin so making active borders in the panorama, you will still see the panorama through them, but can not interact with it at the sides.
Or even use rectangles so it is slightly greyed out, showing a visible border to the person looking at the tour.
Regards,

[drites]

Hi drites,
There are a few thoughts on this.
Firstly don't make the panorama viewport too wide so you can still scoll using the web page.
Or you could put active containers on either side of the skin so making active borders in the panorama, you will still see the panorama through them, but can not interact with it at the sides.
Or even use rectangles so it is slightly greyed out, showing a visible border to the person looking at the tour.
Regards,

Hi Hopki,

Thank you for your response. Sadly, I can't touch the client's side of the web, so I can't set the wide to whatever I want.

Can you explain what you mean by active container? I can't find in the documentation anything relative to that terms.

Our team did a codepen test, but it requieres editing the output html, or creating an iframe of an iframe... See it below, it shows a "blocker" div until pressed:

https://codepen.io/ivan-droneit/pen/xxmMZEM
a
The best scenario is doing it from the skin natively.

Best regards,