1 Topic by yann-raout (edited by yann-raout 2015-02-04 14:52:00)

  • Registered: 2015-02-03
  • Posts: 8

Topic: embedding a virtal tour (html5) in a basic page [SOLVED]

Hi,

What is the procedure to embed a virtual tour in a basic page.
My website is: yann-raout-weddingphotographer.com

I uploaded the indexdata folder and the index.html file in the root directory (public.html)
I created my virtual tour as “full screen“

then i go to my blank basic page in showkase and i add that line: <embed src="index.hmtl"> then i click on source, the line gets grey with weird symbols, i save, publish but the text shows up on the page but not the tour...


what is the text line to add, i think the one i add is completely wrong....

Should i add an i frame code. i don't think so as i ant to add my virtual tour directly on my server.

Thanks for help

yann

  • Registered: 2012-12-16
  • Posts: 950

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

then i go to my blank basic page in showkase and i add that line: <embed src="index.hmtl"> then i click on source, the line gets grey with weird symbols, i save, publish but the text shows up on the page but not the tour...

You need to click on 'Source' (to enter 'Source' mode) before entering your any HTML code (not afterwards).

Whatever software you use to create your virtual tour, please check with their support to see if they have any information on how to embed their virtual tours into web pages.

If you are trying to add the code <embed src="index.html"> to your Showkase page, then I expect the virtual tour is somehow embedded into the 'index.html' file. You could open the 'index.html' file in a plain text editor and examine the code. If you find the code which embeds the virtual tour into the web page, you could copy it into your Showkase page (being sure to click 'Source' first). If the virtual tour comprises many files, then you may need to ensure that they are uploaded to the correct location on your web server and that the paths in the code you use are correct.

Otherwise, you could certainly load the 'index.html' file into an iframe by using code such as:

<iframe src="index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

I hope this helps.

3 Reply by yann-raout (edited by yann-raout 2015-02-05 15:02:13)

  • Registered: 2015-02-03
  • Posts: 8

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

Yes exactly, i finally also found that on the web, it works good

“Host virtual tours in your own web server
Upload the virtual tour folder to your server and use similar embedding codes like above:
<iframe src='absolute URL for the virtual tour in your own server' width='525' height='400' frameborder='0' border='0'></iframe>
You only need to change the URL location to the new one.“

That's already good but, there is a big but:
Here is a nice other question i'm trying to figure out.
I created the tour with Panotourpro2 so it's fully responsive, so it displays on ipads and i phones but If i, like up there, if i select width: 525 height=400, the size of the windows will be the same on all devices so too large for i phones, do you have an idea to make the iframe fully responsive? if i do width 1024pxl it's perfect for my website 1200pxl on a desktop computer but on iphone its way too large.
And if i do with 400pxl x300pxl, it's perfect for i phone but too small for i pad and 13" or 15'' screens.

What should i do...the tour is pretty light each pano is like 3mo quality 83

may be i should use the tecnic with:  <embed src="index.html"> ???

thanks for your help already, that's new important info added to that forum !

Yann

  • Registered: 2012-12-16
  • Posts: 950

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

You might like to take a look at this forum thread, entitled "How to get an IFrame to be responsive in iOS Safari?". It might help with your problem. http://stackoverflow.com/questions/2308 … ios-safari
If you need to add any custom CSS to your Showkase web pages, you can add it to the '_themes/theme_name/css/custom.css' file as noted here.

  • Registered: 2015-02-03
  • Posts: 8

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

hi steven, i'm having hard time to get the virtual tour fully responsive (full screen on all devices), do you have any other links?

  • Registered: 2012-12-16
  • Posts: 950

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

Have you tried just using a 100% x 100% iframe such as the following?

<iframe src="index.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>

It might be worth trying.

Another thing you might like to try is to use JavaScript to listen for a change in the user's browser window size and then assign new dimensions to your iframe accordingly.
There are examples of this technique in the Using a Resizable Gallery with a Header support section. In the online examples, JavaScript is used to dynamically set the gallery's dimensions. You could copy and modify the code as required to set your iframe's dimensions instead.

  • Registered: 2015-02-03
  • Posts: 8

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

Hello steve, thank you so much for your help, i'm sorry i didn't see you responded for so long, i have forgotten my user login and password....

So i actually uploaded my tour on google drive, i went to detail, clik on the link to open the virtual and then i copied the url and i added that url in that piece of code juste after src:
That works good!!
The only thing is i would like to play it full screen on any device....especially on smart phone vertical position..i tried the 100%x100% but doesn'y work, i'm gonna try with javascript but if you have another link, send it.



<style type="text/css">.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container"><iframe allowfullscreen="" frameborder="0" height="560" src="https://1441ec21ddce52834a515c32adc94da0caf017ba.googledrive.com/host/0B5jOJ9Q3XdyVNW5wS3EzQk5WNVU/index.html" style="border:0" width="975"></iframe></div>

Thks for help

  • Registered: 2012-12-16
  • Posts: 950

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

It looks like your virtual tour uses Adobe Flash so it might not be viewable on mobile devices at all.

The only thing is i would like to play it full screen on any device...

If you want your virtual tour to be viewed as large as possible, then instead of loading it into an iframe (and essentially embedding it into a web page alongside other content), it might be an idea to just provide a link on your web page to open the virtual tour on a page of its own (linking directly to the 'index.html' page on Google Drive that you would otherwise load into the iframe).

  • Registered: 2015-07-30
  • Posts: 1

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

i managed to do it everything is ok thank you so much

  • Registered: 2012-12-16
  • Posts: 950

Re: embedding a virtal tour (html5) in a basic page [SOLVED]

That's great!
Thank you for posting back to let me know.