Add a Video Pop-up

A video hotspot in conjunction with the Skin Editor can be used to pop up videos from a URL, Vimeo or YouTube and an external file.

Add the Video Hotspot

Add a hotspot by either dragging it in or manually adding the hotspot and hotspot properties.

When dragging the video in (local file, URL, YouTube, Vimeo), the Type and Source will be automatically selected. YouTube and Vimeo links will be added along with their video titles.

Depending on the video source, the Skin-ID will be automatically populated for use in the Skin Editor. The Skin-ID is used in a hotspot template. The hotspot template provides the hotspot icon.

You can also add a video type hotspot by double-clicking in the Viewer to add a hotspot and then choose Video for the Type. Then choose the video source. For a File Source, for Link Target URL, click the folder icon to navigate and choose the file.

For URL, simply add the web address of the video (if other than Vimeo or YouTube): http://www.example.com/myvideo.mp4.

If using Vimeo or YouTube, then just add the video’s URL: https://vimeo.com/159223909

Skin the Hotspot

Built-In Skins

Hotspots can be “skinned”. Meaning, they can be given custom icons. The Silhouette and Simplex skins provide icons for video hotspots. So, to skin your Video hotspot, you can simply add one of these skins to the HTML5 Output.

Built-In Components

The hotspot can also be skinned using built-in Components.

  1. Open the Skin Editor, and then open the Component Toolbox.
  2. Find the Built-in Components. Tip: Filter tags for video.
  3. Double-click one of the Video Popup components to add it to the skin.
  4. Save the skin.
  5. Add it to your project.

If you want to customize your video pop-ups, use the built-in components as a template. If you just want a different icon, select the icon (child of the hotspot template). In the SVG properties, click the Change… button by the Normal and Mouse Over states. More on this can be found here.


See also