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 and skin actions.
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, 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
★ Tip: URLs with timestamps are supported:
https://youtu.be/jC6GJ4FRq0M?t=67https://vimeo.com/73214621#t=3m13s
Skin the Hotspot
Built-In Skins
Hotspots can be “skinned”. Meaning, they can be given custom icons. All built-in skins provide icons for video hotspots. So, to skin your Video hotspot, you can simply add one of these skins to the Web Output.
Built-In Components
The hotspot can also be skinned with built-in Components.
- Open the Skin Editor, and then open the Component Toolbox. The Feather components will be immediately visible.
- For this example, double-click on the Feather Box Point Hotspots component. This will add point hotspot templates for all hotspot types including the video hotspot.
- Save the skin.
- 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.