Video Element

Use this to add videos to your skin. You can use local files, URLs or YouTube and Vimeo IDs.

Add the Video skin element by doing any of the following:

  • Select it in the Toolbar and click and drag in the Canvas to add the element.

  • Go the Elements menu and select Video. Click and drag in the Canvas to add the element.

Position

ID

Give the element a unique ID or name. An ID is given automatically and will be numerically ordered when more than one are added. If an ID is already used by another element, a warning symbol will appear next to the input field.

★ Click the warning symbol to have Pano2VR create a unique ID for you.

Position

The X and Y coordinates for the element.

Logic Block available.

An element’s position is relative to its parent and to its anchored position (the Canvas is the parent to top level elements).

For example, a video that is anchored and placed in the middle of the Canvas will have its anchor set to center and X and Y set to 0. So, if the element is anchored to the horizontal center, the X coordinate is measured from the center of the parent to the horizontal center of the element. Likewise, if an element is anchored right, the x-coordinate is measured from the right side of the parent to the right side of the element as indicated by the arrows. ★ Tip: Double-click the arrows to set X and Y to 0.

This makes it easier to precisely position elements, especially on the edges of the player. For example, to keep an element positioned on the bottom center of the player and a certain distance from the edge, set the anchor to center bottom and set the Y value to 20 pixels and X to 0.

X and Y:

  • Percentage – Unit to set the position of the element based on the player’s size/window.

  • Pixels – Unit to set the actual location of the element within the skin.

  • CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

    • Example: Set the x position unit to CSS. Enter, 100px in the edit field. Add a logic block, choose a trigger and add 20% for the size, effectively switching units.

Logic Block available.

Anchor

Use this grid to “stick” the element to a section of the player window. See above, to learn how the Anchor influences Position.

Size

Adjust the element’s size (width and height) in pixels. Width and Height:

  • Percentage – Unit to set the size of the element based on the player’s size/window.

  • Pixels – Unit to sets the actual size of the element.

  • Lock Aspect Ratio – Click the link icon to lock the element’s size aspect ratio when resizing in the Canvas or changing size values in the properties panel.

  • CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

    • Example: Position an element 50 pixels from the top and then set the height to calc(100% - 50px). The element will then always have the same distance of 50px from the top and will extend straight down to the bottom.

Logic Block available.

Appearance

Scaling

Scales the element along the x and y axes. Doubling the value on either axis, for instance, will double the size of the element. If a scaling modifier is enabled, this scaling setting is ignored.

Center

Use this grid to determine how the element scales. The default is set to the center so the element will scale in or out from its center. If you anchor the scaling to the upper left corner, for example, the scaling will center from this point.

Logic Block available.

Angle

Use this parameter to adjust the angle of the element. It will use the Center grid (above) as its axis. For example, if the center is chosen, it will rotate around its center. If the bottom left corner is selected, the button will rotate around that corner.

Logic Block available.

Visible

Select or deselect to keep the button visible or invisible. Visibility or invisibility can be changed and toggled with actions.

Logic Block available.

Alpha

The transparency of the button. A setting of 1.000 is opaque. Lowering this number will increase the button’s transparency.

Logic Block available.

Hand Cursor

Select to have the hand cursor show when the mouse rolls over the element. This makes it more obvious to the user that the area is interactive.

Video

Video Source

Choose the video’s source type:

  • File – To use a video from a local file. You can choose an optional poster frame (Poster Frame File) which is a preview image of the video. It is displayed until the video starts playing.

  • URL – To use a video from a URL. Enter the URL of the video and its poster frame URL.

  • YouTube – To embed a YouTube video. Paste the URL of a YouTube video into the YouTube ID field. When you do, you’ll see the video ID as a link. You can also add links with timestamps. Click on this to check it is the correct video (it will open the page in a browser). You cannot mute the audio of YouTube videos.

  • Vimeo – To embed a Vimeo video. Paste the URL of a Vimeo video into the Vimeo ID field. When you do, you’ll see the video ID as a link. Click on this to check it is the correct video (it will open the page in a browser). You cannot hide the Vimeo movie controls or mute the audio. ★ Tip: To set a video in Vimeo to “unlisted”, select Hide this video from vimeo.com in the video’s Privacy settings.

Options

(not all options are available for all video source types):

  • Autoplay – To automatically start the video.

  • Controls – To show playback controls inside the video.

  • Loop – To continuously loop the video.

  • Mute – To mute the video’s audio.

Loading

  • Unload video on hide – Select to unload the video when it gets hidden through a skin action. This also stops the sound of the video.

Accessibility

Tab Index

To make skin elements controllable via keyboard, they have to be added to the tab order of the web page. A tab index of -1 (the default) excludes the element from the tab order. A tab index of 0 includes the element in the tab order. Browsers will highlight the active element by putting a rectangle around them. Once a skin element is the active element, indicated by the highlight, hit the Enter/Return key to trigger its click action.

ARIA Label, Description, Details

These are attributes or propterties that are used to define the element and support the Role.

Label – Defines or names the element. Description – Provide a brief description of the element. Details – Provide an extended, detailed description of the element.

ARIA Roles

ARIA Roles are used to define UI elements (button, loading bar, etc.). Choose from the list which best defines the element.

Hidden

Select to hide all ARIA attributes.

Advanced

Z-Index

Set the CSS z-index property. Use numbers to set the stacking order or leave the setting at Default. Default will use the stacking order set in the Tree.

This is used to ensure that elements are displayed in the correct stacking order especially when close or overlapping.

Permeable

Select to make sure the element does not accept mouse clicks. This is useful for when you want to include an element in the skin but don’t want it to hinder the ability to interact with the panorama. For example, you could add a vignette or logo or border that when clicked on, will allow interaction with the panoramas.

Hotspot Proxy ID

Enter the corresponding Skin ID. The ID should come from the hotspot’s Skin-ID field in the hotspot properties. Hotspot proxies give you the ability to link skin elements to specific hotspots. This means that the element will receive the same mouse and touch events as the hotspot. You can also add {} to use node ID as hotspot proxies. Learn more.

CSS Classes

Enter the CSS class names for the selected element. You can enter more than one class separated by spaces. If you need more space, click the Edit button to the right of the field for a larger text field. No dot . needed.

CSS Styles

Enter the CSS style attributes for the selected element. You can enter more than one style separated by semi-colons. If you need more space, click the Edit button to the right of the field for a larger text field.

CSS Styles Inner Element

Enter CSS style attributes for the selected element’s inner element. (Some skin elements, like Image, Video and External Image, have an inner element nested inside the element’s main <div>.)

For example, an image element can have a border: border-radius: 20px; border: 5px solid red;. This can also be entered with a line break: border-radius: 20px; border: 5px solid red;

Image with added CSS border
Image with added CSS border

Keyboard Shortcut

Enter the preferred key to control the action defined to the element. For example, select the text field, hit the up key on the keyboard. Then add a Mouse Click action. The element, when clicked or when the up key is pressed, will perform the assigned action.

Exclude from Translation

Select this option to not include this element in the skin’s translation file.

Actions

Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Double-click in the Actions area or click the plus sign to the right to open the Action Settings.

See Skin Actions, for details on all actions.

Modifiers

Adding modifiers allows you to make elements move, scale or rotate when the panorama is being panned, tilted, zoomed or loaded. A good example of a use of a modifier is for a loading bar that scales in relation to how much of the panorama has been loaded. You can see how this is done by opening one of our default skins.

Double-click in the Modifiers area or hit the plus sign to the right to open the Modifier Settings.

See Skin Modifiers, for more details on all modifiers.

Notes

Use this section to add information about the element. This is especially useful if you have a component and want to explain the elements inside that component.

Notes will show up as tooltips in the Tree.

Hide Videos when not playing using a Logic Block

  1. Click the arrows next to Visible to open the Logic Block for visibility.

  2. In the Logic Block, create the following expression:

    → Trigger: Active

    → Comparison: =

    → Value: False

    → Visible: False

    This expression states that when the video is not playing it will not be visible; it will hide itself.

✭ Note: Using the Active trigger will not work with YouTube and Vimeo videos.

Fade Videos in and out using a Logic Block

  1. Click the arrows next to Alpha to open the Logic Block for visibility.

  2. In the Logic Block, create the following expression:

    → Trigger: Active

    → Comparison: =

    → Value: False

    → Alpha: 0

    → Transition: 2 seconds (or desired length)

    This expression states that when video is not playing (not active), it hide itself with a transition from full opacity to transparent.

    So, if you have a button that toggles play and pause, for example, the video will fade in and out.

✭ Note: Using the Active trigger will not work with YouTube and Vimeo videos.

Filling the Video’s Container

Sometimes, a video’s container does not match the video’s aspect ratio. When this happens you have a few ways to solve the problem.

Do nothing and just add the video to the element. The video will then resize itself to fit within the borders of the container. Black bars may appear left/right or top/bottom.

The other solution is to use a little CSS to make the video fill the container:

  1. Open the video element’s Advanced pane.

  2. In the field for CSS Style, add overflow: hidden.

  3. And for ‘CSS Styles Inner Element, add object-fit: cover.

✭ Note that this will work only for Video files and URLs but not for YouTube and Vimeo videos.

360 Video

This video element does not support 360º Video. If you’d like to add 360º video via the skin (i.e. a video point hotspot), you can use a Text Field with an iframe set as the text.

If you’d like to use a point hotspot to open a 360º Video, you can use the component, Web Link and add your link to it and if necessary, swap out the icon.

✭ If your 360 video is not playing back, it could be because Windows cannot natively playback large videos. Please download and install the K-lite Codec Pack. The Basic pack should be enough.


See also