Product Updates | Contact Support | System Status
Page Contents

    Adding Interactive Overlays to Videos

    In this topic you will learn how to add interactive overlays to videos using HapYak.

    HapYak Studio 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 HapYak interactivity to a player, you need a HapYak-enabled Brightcove Player and you need to make sure a HapYak project has been created. For information on how to do this, see Getting Started with Interactivity.

    Adding a text overlay

    Text overlays are used to display text on a video during playback. The overlay can also be clickable and open another browser page when clicked. In the following example, the text overlay will appear at the 75% point of the video and display until the end of the video. Clicking the overlay will open a link in a new browser tab and pause the video.


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

    1. Login to HapYak Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. In the bottom toolbar, click on the text overlay button.
    5. Click on the Editor link in the menu.
    6. Enter text for the overlay and click Submit.
    7. Click and drag the overlay to where you want it to appear on the video.
    8. Click the Start Time menu.
    9. Enter a Start time in seconds, as a percentage or in time format. This example sets the start time to the 75% point of the video. Click Submit.
    10. Click the clock icon to set the duration of the overlay. Click Submit.
    11. Click the Link menu.
    12. Enter a URL to direct to when the overlay is clicked.
    13. (Optional) Click the BEHAVIOR tab and have the video Pause on video click. Click Submit.
    14. Click Done.

    Publish the video using the Media module and confirm that the overlay appears.

    Adding an image overlay

    Image overlays are used to display an image on a video during playback. The overlay can also be clickable and open another browser page when clicked. In the following example, the image overlay will appear at the 75% point of the video and display until the end of the video. Clicking the overlay will open a link in a new browser tab and pause the video.


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

    1. Login to HapYak Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. In the bottom toolbar, click on the image overlay button.
    5. Click Choose File and browse and select an image or click the URL tab and enter the URL to an image file.
    6. Click Show.
    7. The image will display on the Preview tab. Click Submit.
    8. Click and drag the overlay to where you want it to appear on the video.
    9. Click the Start Time menu.
    10. Enter a Start time in seconds, as a percentage or in time format. This example sets the start time to the 75% point of the video. Click Submit.
    11. Click the clock icon to set the duration of the overlay. Click Submit.
    12. Click the Link menu.
    13. Enter a URL to direct to when the overlay is clicked.
    14. (Optional) Click the BEHAVIOR tab and have the video Pause on video click. Click Submit.
    15. Click Done.

    Publish the video using the Media module and confirm that the overlay appears.

    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 text overlay to a project:

    1. Login to HapYak Studio.
    2. In the left navigation, click Manage.
    3. Click on a project to open it.
    4. In the bottom toolbar, click on the transparent overlay button.
    5. Enter the URL to direct to.
    6. Click the BEHAVIOR tab and set the video to Pause on video click.
    7. Click Submit.
    8. 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 .
    9. Click the Start Time menu. By default, the Start time is set to 00:00.000 which is the start of the video. Enter a Start time and click Submit.
    10. Click the clock icon to set the duration of the overlay. Click Submit.
    11. Click Done.

    Publish the video using the Media module and confirm that when the overlay area is clicked, the URL is opened.


    Page last updated on 24 Feb 2022