Adaptive iframe for virtual tour

15 Posts

mail8412 posted this 04 July 2022

I am trying to embed some 360 virtual tours I created to my website www.my360pano.com

They look great on my desktop, but a horrible mess on a phone.
I have read through other posts and replies in the forum, and in particular this one:
https://nicepage.com/questions/64796/does-responsive-work-with-html-object-referencing-size

However, a) As others pointed out, it doesn't work (for me, I cannot edit the CSS individually per device type, if I change the ratio in one it changes in all of them), and the final reply from the support team was just that using iframes is not a good idea but did not suggest an alternative.

b) That is not really the solution I need, as they are not videos that need to stay in a horizontal 16:9 ratio. What I want is for the virtual tours to display in portrait mode when using a phone in portrait mode.

This is one of my virtual tours, which works as described above when in a standalone page, but looks a horrible mess embedded:

http://epicshoots.co.uk/Property/Trent-Park/

And to show that it can be done using other website platforms, here is someone else's website:

https://www.online360s.com/

I would be grateful for your help, as at the moment my website is unusable professionally...

Thanks

I am trying to embed some 360 virtual tours I created to my website www.my360pano.com They look great on my desktop, but a horrible mess on a phone. I have read through other posts and replies in the forum, and in particular this one: https://nicepage.com/questions/64796/does-responsive-work-with-html-object-referencing-size However, a) As others pointed out, it doesn't work (for me, I cannot edit the CSS individually per device type, if I change the ratio in one it changes in all of them), and the final reply from the support team was just that using iframes is not a good idea but did not suggest an alternative. b) That is not really the solution I need, as they are not videos that need to stay in a horizontal 16:9 ratio. What I want is for the virtual tours to display in portrait mode when using a phone in portrait mode. This is one of my virtual tours, which works as described above when in a standalone page, but looks a horrible mess embedded: http://epicshoots.co.uk/Property/Trent-Park/ And to show that it can be done using other website platforms, here is someone else's website: https://www.online360s.com/ I would be grateful for your help, as at the moment my website is unusable professionally... Thanks

adaptive-iframe virtual-tour embed-virtual-tour portrait-iframe

Vote to pay developers attention to this features or issue.

3 Replies

Order By: Standard | Newest

Support Team posted this 05 July 2022

Hi Brendan,

You can show the tour in the way you want on the page too. in general, you should set the desired height for the HTML element, for the wrapper inside the HTML element and stretch the iframe to cover the wrapper area. But it depends on the result you want to achieve.
Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Brendan, You can show the tour in the way you want on the page too. in general, you should set the desired height for the HTML element, for the wrapper inside the HTML element and stretch the iframe to cover the wrapper area. But it depends on the result you want to achieve. Please let us know if you have any further questions. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

15 Posts

mail8412 posted this 04 July 2022

Hi Olivia,

Thanks for your reply. Sorry, you couldn't see the tour because I had temporarily disabled the one in the home page and forgot to re-enable it.
Thanks, your reply confirms what I had originally thought.
I have tried messing around with the html code by changing the height to 100vh but it doesn't really work either- I think the best option for me is to have an image instead of html iframe, with a link to open a new page with the tour.

Regards

Brendan

Hi Olivia, Thanks for your reply. Sorry, you couldn't see the tour because I had temporarily disabled the one in the home page and forgot to re-enable it. Thanks, your reply confirms what I had originally thought. I have tried messing around with the html code by changing the height to 100vh but it doesn't really work either- I think the best option for me is to have an image instead of html iframe, with a link to open a new page with the tour. Regards Brendan

Support Team posted this 04 July 2022

Hi Brendan,

Unfortunately, the tour is not loading on my side. But here is how it works. We cannot control anything inside the iframe from the side of the Nicepage page because this content is located on a different server. We can only define the size of the iframe. Since you added custom HTML to the HTML element, you should control it in the code you added to the HTML element. In Nicepage you can only add the size of the HTML element. That's all. The size of the iframe inside this element is controlled manually. HTML element only executes custom html inside its frames defined in Nicepage.

Please let us know if you have any further questions.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Brendan, Unfortunately, the tour is not loading on my side. But here is how it works. We cannot control anything inside the iframe from the side of the Nicepage page because this content is located on a different server. We can only define the size of the iframe. Since you added custom HTML to the HTML element, you should control it in the code you added to the HTML element. In Nicepage you can only add the size of the HTML element. That's all. The size of the iframe inside this element is controlled manually. HTML element only executes custom html inside its frames defined in Nicepage. Please let us know if you have any further questions. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

You must log in or register to leave comments

Adaptive iframe for virtual tour

Company

Product

Themes & Templates

Nicepage

Web Design