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

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


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


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

  • 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 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,

    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*

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

  • 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

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

    Edited 2 times, last by Umalo (June 3, 2018 at 8:40 PM).

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

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

  • 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

  • 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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!