How to embed virtual tours in multiple websites

In most cases, you want to show your virtual tour along other data. For example in real estate web sites, you want to show things like address, description, image gallery and video beside your virtual tour. So, just having a virtual tour as a url is not very helpful if you want to present it in different templates.

An embedded virtual tour. you can see the stand alone version here. notice the virtual tour will change size based on your browser size and remain usable on mobiles and tablets

In order to make a virtual tour embeddable, it should be resizable. So you can fit it in different templates and html page structures. Vtility virtual tours are free size and you can render it in any size as long as the width, height ratio kept according to the ratio of virtual tour width and height. And even if ratio was not considered virtual tour still resize itself to show user best possible render.

But how you can let every website about the size ratio of your virtual tours?

We do this using Oembed. Oembed is a universal service that let any page of size of its content and get a customized html code based on dimension they need to render it. This way your virtual tour becomes like youtube video. You can render it in any page based on your sizing needs. This way you don’t need to have a software for creating virtual tours. And you can add virtual tours to each listing just by consuming our oembed service. Users create their virtual tours and pass the url to you. your website can get custom html code based on your template and user display and render it for visitors.

To test oembed on vtility, you can go to this oembed testing page and enter a virtual tour url (example: http://www.vtility.net/virtualtour/jcos-life-in-color) to see the html code fetched and rendered into page

Also, each virtual tour have a HTML code that you can place in any html page. this way your virtual tour appears inside your page. You notice that virtual tour html code is fixed size:



A sample HTML code:
<iframe style="border: none; overflow: hidden; height: 525px; width: 700px; " scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="//www.vtility.net/virtualtour/jcos-life-in-color" allowfullscreen=allowfullscreen></iframe>

Free size and responsive HTML code for virtual tours

Many websites and pages use ‘Responsive Design’ to serve users from mobile and tablet devices. when you use responsive design, you don’t rely on a fixed size. To serve this websites too, we have provided each virtual tour with a responsive HTML code that help you put your virtual tours where you don’t know how much space you have to display the virtual tour



A sample Responsive HTML code:
<div style="margin-right: 0; width: 100%; float: none;" ><div style="width: 100%;padding-bottom: 75%;position: relative;margin-left: auto;margin-right: auto;"><iframe style="border: none; overflow: hidden; height: 100%; width: 100%; position: absolute; top: 0;bottom: 0;left: 0;right: 0;" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="//www.vtility.net/virtualtour/jcos-life-in-color" allowfullscreen=allowfullscreen></iframe></div></div>

You can check out a sample of responsive virtual tour html code in jsfiddle. change the size of output to see how virtual tour re-render itself to adopt the new size.

Please note that we included css style inline to make it independent. you can take out inline css from responsive code to make it well formed

© 2016 vtility, All rights reserved.