How do I make a clickable video?

As part of your business video hosting, Vidbeo lets you put clickable regions over each video.

When these regions are placed over products, that has the effect of making that item clickable. Clicking on one could load a new page or, for a more advanced integration, add it to their basket.

The goal

If you haven’t already seen our concept 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.

This guide is quite long as this is such a powerful and flexible part of the platform, however once you have made one clickable video you won’t need to do much of it again as your player and page will already have been correctly set up.

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 clickable region 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.

So the video we chose for our concept has a simple tracking shot, where the object we wanted to make clickable - the flowers - does not move much, is the only featured object on screen, and is large (meaning it is easy to click on).

We plan on adding the region we have drawn below:

Make a video interactive: video chosen

2. Create an overlay over an item

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 Overlays:

Make a video interactive: overlays

If you click on that button you will be taken to a new page.

This has a preview of the video on the left and some details on the right. There you should see a green button to add a new overlay - click on that.

The first two boxes ask for a title and (optional) description. These are not shown within the overlay but are used to identify it, since if you need to edit it - and have multiple ones - calling it something like ‘Product Name’ will help if you ever need to edit it.

Vidbeo overlays form (1)

Next, you are asked when the overlay should appear and disappear. In our video, our flowers should be made clickable at 1 second and no longer at 9 seconds. So we need to enter 00:01 in the first box, and 00:09 in the second box:

Vidbeo overlays form (2)

We now need to specify what this overlay will be used for. Here, we want it to be an invisible region, so we select ‘Invisible, Clickable Region’, and specify what should happen when clicked. We’ll come on to why we have entered ‘addToBasket’ in a moment:

Make a video interactive: select clickable

That link can either contain a URL (like https://www.your-company.com) - or, for an advanced integration, the name of a JavaScript function. That is what we wanted to do for our concept video: when the flowers were clicked, it would pretend the item had been added to a basket.

Therefore we made a pretend JavaScript function called addToBasket: we’ll come on to its content later. For your purposes, you might want to simply enter a URL (that avoids having any complexity using our Player API).

The next two boxes contain the position of the overlay - its X and Y - and the next two boxes contain its width and height. These can be a bit confusing - firstly, because you can use either a px or a % value - and secondly, because the position is relative to the top-left corner and so you have to consider its width and height when positioning it.

You can usually guess roughly where a rectangle should be, particularly when using percentage values. If you imagine the player divided up into, say, 10% bands - you can take a guess at where the left and top edges of your rectangle should be. It doesn’t matter if you are wrong since you can always change the values when you see where your rectangle has ended up on screen. You are aiming to roughly cover your item up with your rectangle, so in your mind, imagine a rectangle like this covering it, and think about roughly where its top-left corner should be:

Make a video interactive: default appearance

In our case, we have positioned the top-left corner of our invisible rectangle to be 45% across (ie from the left edge of the player), and 8% down (ie from the top edge of the player).

Make a video interactive: position

We have made it pretty big - it takes up 50% of the width of the player and 80% of its height.

Having entered those values, the player now knows where the overlay should be positioned and how big it should be.

Click on ‘Proceed’ to save those changes: you should be returned to the page listing the video’s overlays.

3. Testing your region

If you now play the video, you should hopefully find that when your start time (in our case 00:01) is reached, your clickable region appears. It should be the size you entered, and be at the positioned you entered.

If it does not cover your object, you can easily change it by adjusting its size or position by clicking on the little blue button next to its title. That will open the form you just had open asking for its details. Try changing some, click ‘Proceed’, and check your video again.

Make a video interactive: default appearance

At this point your overlay is set up. However you will see one key thing wrong with it: it’s not invisible.

That is deliberate. Since after all, if it was invisible at this stage in the admin panel, you couldn’t see your regions so would have no way of knowing whether you had positioned them correctly.

The good news is that you do not need to do anything to make them invisible: the player simply looks which page it has been embedded on, and if it sees it is the overlays-editing page, it does not apply an invisible background to them.

Therefore if you look at the same video embedded on any other page, those regions will be invisible. You can check that by viewing it on our ‘share’ URL:

https://vidbeo.com/w/VIDEOID

Note: if you make changes to your regions, this can take a few minutes to propagate. You may need to refresh the page.

4. Enable the Player API?

If you simply want to open a URL when the viewer clicks on the region - for example a page on your site about that product - then you can skip the rest of this guide.

However if you want a more advanced integration, where the click triggers an action (calls a JavaScript function), then you will need to enable the Player API for your player. This allows our player to communicate with your page.

Note: you may have already done this if you have used clickable regions for any of your other videos.

You will need to click on ‘Players’ within the menu of the admin panel. Click on your chosen player. If you scroll down the page you will find a dropdown menu asking whether to enable the Player API. You will need to choose ‘Yes’.

Next, just to the right of that is another box - this time asking for the domains you will use the Player API from. For security, the player needs to know which domains to listen for messages from (requests to the Player API are made by sending messages to the player). If you have multiple sites, enter them separated by a comma. For example:

Make a video interactive: domains

Once done, click ‘Save changes’ in the top-right. The page will refresh.

At this point the Player API is active: but the code to communicate with it is not. You will need to add it.

5. Add the Player API library to your page

All web browsers prevent communication between domains and since our player is served from a different domain to your page, normally the two would not be allowed to communicate. We have built a small library that means you do not have to worry about exactly how the messages are constructed - you can simply call a function whose name we provide, and the actual message-handling is done behind-the-scenes. You can get that JavaScript code from our developer site (https://dev.vidbeo.com), scrolling down to the ‘Player API’ section.

Please save a copy of the .js file and make sure it is available to your web page. Your IT department will be able to do that for you if you do not have access.

For example:

<script src="/path/to/vp_js.v1.1.0.js"></script>

That also means that (should you wish to use them) you will be able to call the functions listed within our Player API and not have to worry about how the messages are constructed and processed to make the requests happen.

6. Write your function

The final step is to implement the function that you would like to be called when the viewer clicks on the item in the video. This does require some knowledge of JavaScript - if you have any questions, please do email us at support@vidbeo.com.

If you remember, in our example we wrote a function called ‘addToBasket’. We only have one clickable item, and so have just made one function. However you could have multiple functions for the different items in different videos.

If you would like to try adding our example function to your page (not in production, of course, as it pops up a message):

function addToBasket(response) {
    // quick validation ...
    if (typeof response != "object" || response.type != "overlayLinkClicked") {
        return false;
    }

    // pause the video using the Player API ...
    vpJS.request("vp_iframe_VIDEOID", "pause", "VIDEOID");

    // show a message (here you would implement your own action) ...
    alert("Item added to basket");
}

You should see the first line is just doing some quick validation to check the response is indeed an object, and the type property is overlayLinkClicked.

The next line is optional - it pauses the video when the item is clicked. You can see it uses our library (vpJS). You can see why the request is called that by reading through our Player API documentation.

Finally, we have simply popped up a message using ‘alert’ that says the item has been added to the basket.

(In our example page, in place of this alert message we instead made a div element visible that contained some text pretending the item had been added to a basket - since this part is unique to your site, we have left it up to you how you would like to respond to the click)

If you have any questions, please email us at support@vidbeo.com and we’ll do our best to help you get the most from this powerful and flexible feature.

Go back to the questions about videos