How do I make a clickable video?
As part of your business video hosting, Vidbeo lets you put clickable regions over each video. We call them hotspots.
When hotspots are placed over products in your video, it has the effect of making that item clickable. Clicking on one could load a new page or, for a more advanced integration, call a JavaScript function. For example a function could add the item to their basket.
The goal
If you haven’t already seen our basic demo of clickable video we recommend taking a look as just one example of what you could do.
If you would like to create something similar with one of your videos, we have documented the process we went through to make it below.
1 Choose a suitable video
The first step is to find a suitable video. Not all videos work well. Since you are positioning a region over an item that you want the viewer to click on, that item should not move much, if at all. The clickable region placed over it does not move and so you will need to make sure it is large enough to cover the object for its duration.
In addition, having just one hotspot shown at a time works best. If there are many appearing and disappearing it becomes much harder to keep track of them.
Finally, the product should be quite large. A tiny item would need a correspondingly small region and so it may be quite difficult for the viewer to click on it. This is especially important on mobile devices where the amount of space is even more limited.
The video we chose for our demo has a simple tracking shot, where the object we wanted to make clickable - the hot air balloon - does not move much and is large (meaning it is easy to click on).
2 Create a hotspot
If you click on your chosen video’s thumbnail image within your content library, you will be taken to view its details. This page has a preview of the video, its title, its description, and so on. The part of the page we are interested in is the one labelled Interactive. Click that, and then on Hotspots.
You should see a button to Add hotspot.
You are asked when that should appear and disappear. Let’s say we want it to be made clickable at 3 seconds and no longer be at 7 seconds. We’d enter 00:00:03 in the first box, and 00:00:07 in the second box (as each expects a time-code like HH:MM:SS):
Continue and next you need to specify where it should be positioned. For a non-360 video those values are percentages of the width and height (we can’t use a fixed number of pixels because we don’t know how big the video will end up being embedded). For example 70 and 35 means the hotspot’s centre will be put 70% across and 35% down. It may take some experimenting but you don’t need to get it pixel-perfect!
The next screen asks for a link. Enter a URL (like https://www.your-company.com).
Finally you can choose the opacity of your hotspot. We’ve found translucent generally works well. If you do want to make it invisible we would recommend initially not making it invisible so that you can check its position is correct. Once you confirm it is in the right place, you could then edit it in the video CMS to change its opacity to make it invisible.
3 Testing your clickable video
If you now play that video (you may need to reload it because the prior data, without it, will have been cached), you should hopefully find that when your start time is reached, your clickable hotspot appears:
If it does not appear in the right place, change its position by editing the hotspot. You should see an option to edit it on the right of it (in the list of hotspots being shown). That will again open the form you just had open asking for its details. Adjust the values and check your video again.
Note: As you make further changes they can take a few seconds to propagate. You may need to refresh the page to see them. To make editing easier it may be helpful to have the video’s landing page open in a separate browser tab or window so you can reload that independently of the library and video CMS.
4 Advanced integration
We have experimental support for calling JavaScript instead of a URL when a hotspot is clicked. You would need to implement the JavaScript function that you would like to be called when the viewer clicks on the item in the video. So this does require some coding knowledge. If you are interested in doing this, please get in touch and we’ll do our best to help you get the most from clickable video.
Updated: September 25, 2023