Adding a Transparent Overlay to a Video

In this topic you will learn how to add a transparent overlay to a video.

The Interactivity module provides the ability to add different types of interactive overlays to videos. Text and image overlays can be displayed on videos during video playback. For example, overlays can display additional text or a company logo on a video. Overlays can also be clickable and open additional web pages if needed.

Before you get started

Before you can add interactivity to a player, you need an Interactivity-enabled Brightcove Player and you need to make sure an Interactivity project has been created. For information on how to do this, see Getting Started with Video Interactivity.

Adding a transparent overlay

Transparent overlays can be used to add a "clickable hotspot" to an area of a video. For example, you may have a video with a company logo burned into the bottom corner. A transparent overlay can be added over the logo so when clicked, the viewer is directed to another URL. In the following example, the Brightcove logo is burned into the source video. Clicking the overlay at any point will open a link in a new browser tab and pause the video.

Follow these steps to add a transparent overlay to a project:

  1. Login to Video Cloud Studio.
  2. Open the Interactivity module.
  3. Click New project.
  4. Enter a Project Title.
  5. Select a video to use.
  6. Click Create.
  7. Play the video to the point where the transparent overlay will be used.
  8. In the bottom toolbar, click on the transparent overlay icon.
  9. Enter the URL to direct to.
  10. Click the BEHAVIOR tab and set the video to Pause on video click.
  11. Click Save.
  12. Drag and size the overlay to where you want the "hotspot" to be. In this example, the overlay will cover a logo image that appears in the video .
  13. Click the Start Time menu.
  14. Enter a Start time in seconds, as a percentage or in time format and click SAVE.
  15. Click the clock icon to set the duration of the overlay. Click SUBMIT.
  16. Click Done.
  17. Click Embed.
  18. Click Preview, play the video and confirm that clicking the overlay opens the specified URL.