Launching YouTube video on Hotspot Click

This example shows launching a YouTube Video after clicking on a hotspot. It is done using the “iframe” hotspot, that enables you to show any html page on a hotspot click. (This example requires player in version 2.0.9 or newer)

Click on the blue hot-spot icon on the backpack to open the youtube player.


 

How this example was built:

You need 3DRT Setup Utility 1.7.0 or newer to use the iframe-hotspot. Until than you need to edit the config.js file manually.

First create your 360 view using the 3DRT Setup Utility and use any other hotspot type, e.g. “Blank Hotspot” or “Url Hotspot”.

Than export the 360 view and edit the config.js in the exported folder in your favourite text editor (SublimeText, Notepad, PSPad, Atom, Vim,….). If you were using “Url Hotspot”, repalce the “url” with “iframe” so it looks like this:

This means, that clicking on the hotspot an iframe will show and load the specified url.

In case you get an “error evaluating config.js file” error, there is probably a typo in the cofnig.js file after you have edited it. Please try to check (copy and paste) the config.js code in this javascript validator.

Styles

The iframe is loaded at 100% width and 100% height, so it covers the entire 360 player area. You can modify this by editing styles.css file:

The close button look and position can be also modified by editing the styles:

Download:

You can download the above example here: example_iframe_video.zip

Other:

After uploading the example folder into the wp-content/uploads/yofla360/ folder, I have used this embed code to show the 360 view using the 360-product-rotation wordpress plugin:

See also:
How to play local video with the video-hotspot: Video Hotspot

Questions? Just contact me.