Skip to main content

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 a video point hotspot using a Component

  1. Open a project or import an image.

  2. Select the Point Hotspot Viewer Mode.

  3. Add a hotspot by double-clicking in the viewer.

  4. In the Hotspot properties, select Video as the Type.

  5. Select the video’s source (File, URL, Vimeo, YouTube).

    Depending on the source chosen, the Skin-ID will be automatically populated for use in the Skin Editor. This can, of course, be changed, but we thought we’d save you an extra step.

  6. Add the Link Target URL.

    This varies depending on the video’s source. For File, use 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

  7. Open the Output panel and add the HTML5 output.

  8. Add a skin or open the Skin Editor (Click the Edit Skin button).

  9. Open the Component Toolbox, find the Built-in Components. Or build the component yourself.

  10. Double-click one of the Video Popup components to add it to the skin.

Build the video component

You can use one of the built-in components or simply build one yourself. Here’s how:

  1. Open the Skin Editor.

  2. Add a Hotspot Template to add a custom hotspot image or choose any built-in hotspot template components (hint: filter for hotspot template).

  3. Add a Video Element.

  4. Select the Hotspot Template and give it the following action:

    → Source = Mouse Click

    → Action = Set Value

    → Value = $hu

    → Target = The video element

  5. Save and rename the skin.

  6. Output the project.

    You’ll now see an image graphic representing the point hotspot and when you click on it, it opens the video.


See also

2017-09-21 12:27:10