How to add interactive overlays and calls-to-action to your video player
Easily add interactions in the VIXY video player studio
Connect videos, link out to additional content, create calls to action, and more. With interactive overlays, the interactive elements are layered on top of the video. This type of interaction works particularly well for existing video content, for example, creating a ‘buy now’ button or asking a viewer for feedback. Depending on your objectives there are different types of interaction that can be triggered by the interactive overlay:
- Opening an external website or app
- Opening an in-video player contact form
- Opening an in-video player menu (with links to other video's)
- Playing an other video
- Downloading documents straight from the video
- Directly adding or linking to items in a shopping environment
- Jumping to a specific time (chapter) in the video
- Triggering an event on the page where the video is featured (via java script, for example)
Start creating an interactive video player
- Go to the tab video player and click on the video player on which you want to add interactions.
- Mind the aspect ratio of the video player. Because the video player is responsive the buttons will scale (larger of smaller) depending the place where the video is embedded. It scales from the
- Now go to the look and feel tab (the one with the eye icon). There are a lot of options to customize your videoplayer. In the subtab custom styles you can change te colours of the video player, but in this article we focus on the button plugin.
- Activate the button plugin by checking the box. And click on "Add new button"
- The basics
First decide where you want to position the button. In this example we are going to show you how we added the Gamma logo as an interactive button in the video player. Position: is starting postion of the image. In this example we decided to position the button "Top left".
Link: The link where the button will send a viewer when clicking the button.
Width & Height: The displayed width and height of the image on the video player. In this example 150x80 pixels.
Analytics label: this will be passed on to Google Analytics for tracking.
- A button can have a normal and a mouse-over state. Press the "select" button to upload your image or logo. In this case we used the Gamma logo.You now have three options in our case we went for option b
a. Existing entry: You can select an image that you have uploaden
b. Upload: Select an image from you desktop
c. Url: fill in the url if you have your image somewhere else online
- Press on Upload&Select
Now that the image is uploaded we go to the advanced button options
- Advanced: for pixel perfect placement of the image in the video player you can use margins to move the image around. In the logo example we gave it some extra spacing from the top and left side of the videoplayer
- Timing: You want a button to appear and disappear at a certain time? Just fill in the time in the from and to fields. You can also use percentages. Without values the image will be visible from the start till the end of the video.
In our example we added that the logo has to disappear at 95% of the video.
- Actions: This is a very powerful option. In our example we just linked to an other url. But you can also use the plugin to
a. Play an other video (every video that is in the OVP)
b. Open contact form (the contact form plugin)
c. Open menu (the menu plugin)
d. Pause the video
e. A custom action
- When you are done configuring the button press save to store the button and your video player.