Web Element Properties
The Web Element Properties set the HTML code, size, click behavior, and position of web content like a YouTube video or a web page pinned to the panorama.
Use the Web Element mode in the Viewer to pin web content to the panorama: a YouTube or Vimeo video, a web page, a map, or any other HTML. The content distorts with the panorama as if it were part of the scene. Select a web element to see its properties in the Properties panel.
In the Viewer, a web element is shown as a checkerboard. Its content appears only in the output, so use the output preview to check it.
Switch to Master Node – This button appears only when the selected web element comes from the tour’s master node while another node is open in the Viewer. Click it to switch to the master node.
ID – Each web element gets a unique ID, starting with Element01. Use the
ID as the target of an action in the Skin Editor,
for example to show or hide the element from a button.
Code – The HTML code to show. Usually this is an <iframe>, the embed code
that video sites and many other websites give you (see
Getting the Embed Code below), but any HTML works, like a
formatted text or a table. Click the edit button next to the field to edit the
code in a larger window.
Size – The width and height of the content in pixels, like the size of a
browser window showing the page. When the code has width and height values,
as most embed codes do, the size is taken from them. A larger size shows more of
a page, with smaller text. The size also sets the element’s proportions, so set
it before you drag the corners into place; how large the element is in the
panorama is set by its corners and FoV.
width and height to 100% to have it always fill the web element, then choose the resolution with Size.Permeable – Select this option to let clicks and drags pass through the web element to the panorama, so that viewers can look around even when they drag on it. The content itself can no longer be clicked, and the element does not pop out. Use it for content that only needs to be seen, like a muted, autoplaying video or a live ticker.
Click Mode – What happens when a viewer clicks the web element. The click mode also decides when the content can be used, for example when a viewer can start the video or scroll the page:
- None – The content works right where it is pinned: viewers can click the play button, follow links, and scroll the page in the panorama. Dragging on the element does not turn the panorama, unless Permeable is selected.
- Pop Out Original – A click moves the element out of the panorama toward the viewer, undistorted and at its original Size. While pinned, the content can’t be clicked; once popped out, it works like a normal web page. Click anywhere outside it to return it to its place.
- Pop Out Fit – The same, but the popped-out element is scaled to fit the player window.
Scaling – How much of the player window a popped-out element fills, from 10% to 100%. The default is 100%. Leave a margin to make it easier to click beside the element to return it. Available when Click Mode is set to Pop Out Fit.
Hand Cursor – Select Enable to show a hand cursor when the pointer is over the pinned element in the output. This is useful with the pop-out click modes, to show viewers that the element can be clicked.
Position – Select Lock to keep the web element from being moved by accident. While it is locked, the rotation, pan, tilt, FoV, and vertical stretch fields are unavailable.
- X Rotation – The rotation around the X axis, from -180° to 180°. Matches the top arrow in the preview image.
- Y Rotation – The rotation around the Y axis, from -180° to 180°. Matches the left arrow in the preview image.
- Z Rotation – The rotation around the Z axis, from -180° to 180°. Matches the center arrow in the preview image.
- Pan – The horizontal position in degrees.
- Tilt – The vertical position in degrees.
- FoV – The horizontal field of view the element covers, from 1° to 150°. A smaller angle makes the element smaller.
- Vertical Stretch – Stretches the element vertically, from 50% to 200%, to fit it exactly into a space like a TV screen. Values other than 100% distort the content. Select Lock next to the field to keep the stretch fixed while you drag the element’s corners in the Viewer.
Which Click Mode to Use
| Click Mode | While pinned | Popped out |
|---|---|---|
| None | Content can be used | – |
| None with Permeable | Shown only, drags turn the view | – |
| Pop Out Original, Pop Out Fit | A click pops it out | Content can be used |
- For a small or steeply angled element, like a TV seen from the side, choose Pop Out Fit: the video or page is hard to use while distorted, and popped out it’s easy to read.
- For a large element that faces the viewer, like a screen on a wall straight ahead, None lets viewers use it without leaving the panorama.
- For content that should only be seen, select Permeable so that the element doesn’t get in the way of looking around.
Getting the Embed Code
Most websites that offer their content for other pages give you a ready-made
<iframe> code. Copy it and paste it into the Code field.
YouTube
- Open the video on YouTube.
- Below the video, click Share, then click Embed.
- Optionally, select Start at to start the video at a certain time.
- Click Copy and paste the code into the Code field.
The code looks like this:
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/ZFUbGGy4SnE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
If Embed is missing, the video’s owner doesn’t allow it to be embedded.
Vimeo
- Open the video on Vimeo.
- Click Share next to the video.
- Copy the code under Embed, and paste it into the Code field.
The code looks like this:
<iframe
src="https://player.vimeo.com/video/76979871"
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
A Web Page, for Example Wikipedia
Pages that don’t offer an embed code can often be shown with an iframe of your
own. Put the page’s address in src, and choose a width and height like the
size of a browser window. For example, for a Wikipedia article:
-
Open the article on Wikipedia and copy its address from the browser’s address bar.
-
Type the iframe code into the Code field, with the address as
src:<iframe src="https://en.wikipedia.org/wiki/Garden_gnome" width="1024" height="768" frameborder="0" ></iframe>
The page scrolls inside the element. With the None click mode, viewers can scroll it right in the panorama; with a pop-out click mode, after it pops out.
Embedded videos and pages need a web server: test the tour in the output preview or on your web server, not by opening the exported HTML file directly.