V5: html5 output non-fullscreen

Q&A about the latest versions
Post Reply
Kay-Uwe Rosseburg
Posts: 34
Joined: Tue Jan 27, 2009 3:12 pm
Contact:

Hi,
I want to embed a panorama made with version 5 into a responsive webpage. By using the code between the "snip here" comments of the html5-output I do not see anything in the existing webpage. (The fullscreen-webpage generated by pano2vr works fine).
Using the code of the html5-output-html generated by pano2vr 4.5 works fine, but it is not responsive and I am afraid, not all the new features of v5 with the new pano2vr-player are supported.
So my questions is: How can I embed a pano produced by pano2vr v5 in an existing website, where the pano is not displayed fullscreen?

Thanks in advance
Kay-Uwe
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Kay-Uwe,

Can you post a link to the page you are having the issue with?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Kay-Uwe Rosseburg
Posts: 34
Joined: Tue Jan 27, 2009 3:12 pm
Contact:

Sorry, yes it is better to explain my issue with the concrete example.

Here is the result for embedding the pano with code of rendered output version of pano2vr 4.5:
http://www.panorama-photography.com/tem ... creen.html
The panorama is displayed well, but with a fixed size.

This is the result for embedding the pano with code of rendered output of pano2vr 5:
http://www.panorama-photography.com/tem ... reen2.html
As you can see, no panorama is displayed. When I look at the code, I see, that the pano2vr_player generates several divs which leads to the result, that they do not work anymore, when you embed the code in a given html-page.

That is my issue, how I can embed the html-output of pano2vr v5 in another html-page?

Kay-Uwe
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

Hi Kay-Uwe,

adapt your head in your html:

Code: Select all

<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
			}
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
				font-size: 10pt;
			}
			/* fix for scroll bars on webkit & >=Mac OS X Lion */ 
			::-webkit-scrollbar {
				background-color: rgba(0,0,0,0.5);
				width: 0.75em;
			}
			::-webkit-scrollbar-thumb {
    			background-color:  rgba(255,255,255,0.5);
			}
		</style>
At the moment I have the "inverted" Problem. Set-up a fix pixel-width and -height and p2vr creates fullscreen... ;-)
Have a nice day

Christian
Kay-Uwe Rosseburg
Posts: 34
Joined: Tue Jan 27, 2009 3:12 pm
Contact:

Thanks for your hint, i will try it.
Greetings
Post Reply