What is the proper element Id of the YouTube player inside this Iframe? is it "iframe" , "Player1"?Okay I got the frame to close using:
![]()
Source code
1 2 3 4 5var 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?
|
|
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)
|
|
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);
}
|
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![]()
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 upHi,
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 10var 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
Location: Netherlands
Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer
: https://pame.virtualtuur.comThat's technically impossible today with the current browser-tech.Is this feature available in VR mode? If not - is it planned? If so, when can we expect to see it?

This post has been edited 2 times, last edit by "Umalo" (Jun 3rd 2018, 8:40pm)
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.aybe some of our community js experts could provide workaround
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.