You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

41

Wednesday, August 3rd 2016, 7:43am

Okay I got the frame to close using:

Source code

1
2
3
4
5
var iframes = document.querySelectorAll("1%");
    	var lastIframe = iframes[iframes.length - 1];
    	lastIframe.parentNode.removeChild(1%);

	


Next is to get the YouTube API to the iframe and close the iframe on video end.

Any Suggestions? Anywho tried Youtube api in Krpano iframe?
What is the proper element Id of the YouTube player inside this Iframe? is it "iframe" , "Player1"?


Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadYouTube(iframe){
	ytplayer = new YT.Player(iframe, {
    	events: {
        	'onStateChange': function(event){
            	/** Yourube API
                    	-1 (unstarted)
                    	0 (ended)
                    	1 (playing)
                    	2 (paused)
                    	3 (buffering)
                    	5 (video cued)
             	**/
            	if (event.data == 1) {full(),
 console.log('The player API changed');
}
            	console.log(event.data)
        	}
    	}	
	});
}

This post has been edited 1 times, last edit by "SpinStudios" (Aug 3rd 2016, 9:20am)


42

Friday, August 12th 2016, 9:48am

Why cant I get the API to communicate with the YouTube player instance?

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


					
					
  var player;
  function onYouTubeIframeAPIReady() {
	player = new YT.Player('iframe', {
    	events: {
      	'onReady': onPlayerReady,
      	'onStateChange': onPlayerStateChange
    	}
	});
  }
  function onPlayerReady(event) {
	document.getElementsByID('iframe').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
	var color;
	if (playerStatus == -1) {
  	color = "#37474F"; // unstarted = gray
	} else if (playerStatus == 0) {
  	color = "#FFFF00"; // ended = yellow
	} else if (playerStatus == 1) {
  	color = "#33691E"; // playing = green
	} else if (playerStatus == 2) {
  	color = "#DD2C00"; // paused = red
	} else if (playerStatus == 3) {
  	color = "#AA00FF"; // buffering = purple
	} else if (playerStatus == 5) {
  	color = "#FF6DOO"; // video cued = orange
	}
	if (color) {
  	document.getElementsByID('iframe').style.borderColor = color;
	}
  }
  function onPlayerStateChange(event) {
	changeBorderColor(event.data);
  }

The ability to close the Iframe when video complete, is an important tool .

Johannes

Beginner

Posts: 28

Location: South Africa

Occupation: Photographer

  • Send private message

43

Saturday, August 13th 2016, 1:11pm

Hi Arthur I have made use of the text style example code but seems to only work with the tour_editor ? http://www.360tour.co.za/tour_editor.html but doesnt work with http://www.360tour.co.za/tour.html now if i can make it work on the tour.html i will just need to see how i can added a iframe html url in text style pop up
hi,

I updated my working example to 1.19.pr4
now i find the problem that the iframed page is very large in the frame..

new:
http://www.virtualtuur.com/krpano/distor…ml/4/index.html

old:
http://www.virtualtuur.com/krpano/distor…ml/3/index.html

what is the 'catch'??

Tuur *thumbsup*
Johann Victor.
Virtual Tour Photographer.
http://www.virtualtours360.co.za/
http://virtualtourphotographer.net

+27828552611

Johannes

Beginner

Posts: 28

Location: South Africa

Occupation: Photographer

  • Send private message

44

Saturday, August 13th 2016, 1:13pm

Hi,

I was asked if it's possible to use iframes as distorted hotspots in krpano.
Here the answer directly for everyone:

Yes, when using the 1.19 version and the new Javascript actions from there, then this would be possible (but HTML5-only of course).

There is currently not 'direct' support for including html elements (but that's already planed), so this will require a 'temporary' hotspot image (can be any small image, e.g. a small 8x8 black or transparent image) to get the hotspot itself created.

Here an example:
http://krpano.com/krpano.html?xml=exampl….xml&html5=only

and here the xml code of that example:

Source code

1
2
3
4
5
6
7
8
9
10
    var iframe = document.createElement("iframe");
    iframe.style.position = "absolute";
    iframe.style.left = 0;
    iframe.style.top = 0;
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = 0;
    iframe.src = args[1];
    caller.registercontentsize(args[2], args[3]);
    caller.sprite.appendChild(iframe);


This could be also used to add any other html content. Only two things to respect - the size need to be set and this will work only in HTML5.

Best regards,
Klaus
Hi I have made use of the text style example code but seems to only work with the tour_editor ? http://www.360tour.co.za/tour_editor.html but doesnt work with http://www.360tour.co.za/tour.html now if i can make it work on the tour.html i will just need to see how i can added a iframe html url in text style pop up
Johann Victor.
Virtual Tour Photographer.
http://www.virtualtours360.co.za/
http://virtualtourphotographer.net

+27828552611

45

Sunday, August 14th 2016, 8:46pm

Is there any way to allow drag paning on the iframe?

46

Tuesday, November 8th 2016, 8:58am

js call to Youtube api from Krpano player

What is the proper call into the iframe from the krpano player?

Source code

1
innerWindow = document.getElementById('iframe').contentWindow;

Tuur

Sage

Posts: 3,113

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

47

Friday, November 11th 2016, 2:40pm

Hi,

this seems not to work anymore. (1.19pr8)
I get the following error in the log.
ERROR: add_iframe - TypeError: null is not an object (evaluating 'caller.sprite.appendChild')

What is the fix?

edit: sorry found it.. must read better .. haha
add: renderer="css3d" to hotspotelement...


Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

48

Wednesday, March 15th 2017, 10:46am

Hi,

i'm using this example to show a web page as a normal layer, not distorted one.


Is there a way to remove an iframe link and dynamically add a new one without using removelayer() ?

I have more that 100 links in my tour which all call different links of the same website that unfortunately takes ages to load. I figured if I could just hide iframe hotspot and than show it along with add_iframe function and a new link, content od the web site would be cached in browser and loading would be faster. But i didn't manage to get it to work.

Also, this approach could be very usefull for mobile devices, to rescale the content when user flips the device from landscape to portait mode and vise versa. Currently i'm using onresize event and than removing and adding iframe layer which calls the add_iframe function. But that is obviously not very practical :)

49

Thursday, May 4th 2017, 12:35pm

Hey there,


is it possible to add this solution for ios scrolling:

/Solved( Bug Scroll iframe Iphone It works with traps. Solutions??


Hi, I was testing different alternatives and codes for scrolling in an iframe with an Iphone.
I found a possible solution and I was wondering if you could help find a solution to the Iphone devices and iframe for scroll.
I enclose a video to see the bug.
Any suggestions????
Link video: http://goo.gl/USs0Gl
A greeting.

Solution :
<![CDATA[
<div style="width: 100%; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<iframe id="glu" width="100%" src="menu01/index.html" frameborder="0" scrolling="yes" onload="resize_iframe()">
</iframe>
</div>
]]>



to this code:

var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.left = 0;
iframe.style.top = 0;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = 0;
iframe.src = args[1];
caller.registercontentsize(args[2], args[3]);
caller.sprite.appendChild(iframe);

50

Thursday, May 4th 2017, 2:49pm

I got it!


You can find the solution for ios scrolling in iframes here:

https://krpano.com/forum/wbb/index.php?p…71055#post71055


Best regards

51

Tuesday, May 22nd 2018, 7:22pm

Is this feature available in VR mode?

Is this feature available in VR mode? If not - is it planned? If so, when can we expect to see it?

Regards!

52

Wednesday, May 23rd 2018, 9:55am

Is this feature available in VR mode? If not - is it planned? If so, when can we expect to see it?
That's technically impossible today with the current browser-tech.

In VR only WebGL content is possible and an iframe is a pure HTML content and there is no browser API for bringing that in any way to WebGL. A browser API for rendering HTML content into a WebGL texture would be required for this.

Best regards,
Klaus

Umalo

Professional

Posts: 1,046

Location: Osijek, Croatia, EU

  • Send private message

53

Saturday, June 2nd 2018, 11:28pm

Today I found that this solution is working strange. Like not all Youtube navigation elements are registered/scaled with video size.
Test on Example link: Link



It gives like small invisible area (capturing mouse events) that should be scaled with YouTube content but it is not.
Try moving mouse over distorted hotspot where is youtube video. In my local example I confirm I can get mute and other content in the middle of the screen. I also learn that this area is scaled based on FOV! If zoom changed area size is changed.
All in all I think that was not happening before. Tried delayedcall trick but it doesn't work here. Anyone knows valid workaround? *whistling*

Can someone please check and confirm.

EDIT: 03.06.2018 => Today I tested browsers on Windows and learn that Chrome and Safari are affected while FF, IE work fine !!!!

This post has been edited 2 times, last edit by "Umalo" (Jun 3rd 2018, 8:40pm)


54

Wednesday, June 6th 2018, 2:50pm

Sorry, can't confirm, works for me - tested on Windows 7 with Chrome 66, Firefox 60, IE11 and Safari 5.

Umalo

Professional

Posts: 1,046

Location: Osijek, Croatia, EU

  • Send private message

55

Wednesday, June 6th 2018, 4:46pm

hm, ok even that is an lead. What about others? Can someone please check this.
My Chrome is on version: Version 67.0.3396.62 (Official Build) (64-bit) and behaviour of the Iframe youtube video from this link: Link to iframe Video is as on posted images in previous post.

56

Wednesday, June 6th 2018, 5:21pm

Hi again, I've got the update to Chrome 67 now too and can confirm it now.

That means that's clearly a new Chrome bug and not related to krpano itself.

Technically the video is just a html element (an iframe with youtube) transformed by CSS-3D-transform. krpano doesn't interact with the mouse events here (and can't also because of the iframe boundary). As it seems Chrome doesn't 3d-transform the mouse coordinates correctly anymore.

Umalo

Professional

Posts: 1,046

Location: Osijek, Croatia, EU

  • Send private message

57

Wednesday, June 6th 2018, 5:53pm

Maybe some of our community js experts could provide workaround knowing and following what is happening with Chrome in last update(s) not being backward compatible with this solution on how to bring Iframe from Krapno.
Thanks for confirmation. Let's see....

58

Wednesday, June 6th 2018, 7:22pm

aybe some of our community js experts could provide workaround
A workaround is technically not possible - the events are processed inside the iframe by Youtube scripts - and fore security reasons there is no access to the iframe contents.

It's a core Chrome bug and should be fixed in Chrome of course.

I will make a bug-report at Chrome here:
https://bugs.chromium.org/p/chromium/issues/list

Umalo

Professional

Posts: 1,046

Location: Osijek, Croatia, EU

  • Send private message

59

Wednesday, June 6th 2018, 8:05pm

*thumbup*

60

Wednesday, October 10th 2018, 12:26pm

Hi Klaus, referring to your note:

Quoted

In VR only WebGL content is possible and an iframe
is a pure HTML content and there is no browser API for bringing that in
any way to WebGL. A browser API for rendering HTML content into a WebGL
texture would be required for this.

I ask if could be possible to have the feature in VR mode using Oculus GO (and if you suggest us how), since , from Oculus support forum:

WebVR

Welcome to the WebVR Guide.
WebVR
is a browser API used to interface with VR headsets. Working with WebVR
directly requires knowledge of JavaScript and WebGL. Interfacing with a
VR headset using WebVR is typically done in two phases:
  • Setup. The application detects the headset, described by the VRDevice object, and targets it for presentation.
  • Per-Frame Rendering. Once setup is complete, a requestAnimationFrame handler is used to query pose data, render the WebGL scene for each eye, and submit it to the headset.
Though
WebVR is an evolving API, a configuration of the API has crystallized
that most major browser vendors believe can reach general availability
in 2018.
Oculus Browser targets this
configuration. All of our samples and documentation explain how to use
this version of the API and also where we diverge from it and why.

Previous: Introduction to VR Web