Example: iframes (or any other html content) as distorted hotspot

Quote from SpinStudios

Okay I got the frame to close using:

Code

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"?

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)
        	}
    	}	
	});
}

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

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 .

Quote from Tuur

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

Quote from Tuur

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/distorted_html/4/index.html

old:
http://www.virtualtuur.com/krpano/distorted_html/3/index.html

what is the 'catch'??

Tuur

Display More

Quote from klaus.krpano

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:
https://krpano.com/krpano.html?xm….xml&html5=only

and here the xml code of that example:

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);

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

Display More

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

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

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

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

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

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 :)

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);

I got it!


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

https://krpano.com/forum/wbb/inde…71055#post71055

Best regards

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

Regards!

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?

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 !!!!

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.

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....

Hi Klaus, referring to your note:

Quote

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