Adding a Link Overlay to a Video

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

The Interactivity module provides the ability to add different types of interactive overlays to videos. Link overlays can display images, colored backgrounds, or transparent areas on videos during playback. Overlays can be clickable and open additional web pages when clicked.

Link overlays are used to display an image, colored background, or transparent overlay on a video during playback. The overlay can also be clickable and open another browser page when clicked.

Follow these steps to add a link 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 overlay should display.
  8. In the right toolbar, click on the link overlay icon.
  9. The Link Overlay editor panel will expand, allowing you to configure your overlay.

Choosing overlay background

The first step in creating a link overlay is choosing the background style:

Link overlay color and image options

You have three options for the overlay background:

  • Color - Select a solid color background for the overlay
  • Transparent - Make the overlay background transparent, creating an invisible clickable area
  • Image - Upload a custom image to use as the overlay background

Configuring the link overlay

After selecting the background type, the Link Overlay editor panel provides comprehensive options for customizing your overlay:

Link overlay editor panel

Style

Customize the visual appearance of your overlay:

  • Text Color - Set the color of any text displayed on the overlay
  • Background Color - Adjust the background color (if using a color background)

Text

Add and configure text content for your overlay:

  • Content - Enter the text that will appear on the overlay
  • Position - Choose where the text appears relative to the overlay (e.g., On Overlay, Top, Bottom, Center)

Timing

Set when the link overlay appears and disappears:

  • Start Time - When the overlay first appears (e.g., 00:26.00)
  • End Time - When the overlay disappears (e.g., 00:31.00)

The Start Time field is flexible and accepts various formats:

  • Seconds: 20 (20 seconds)
  • Time format: 00:20.000 or 1:37
  • Percentage: 15% (15% of the way into the video)
  • Negative time: -15 (15 seconds before the end) or -10% (10% before the end)

You can also use the timeline feature to modify the annotation start and end times by dragging the annotation borders. The timeline provides a visual way to adjust timing with precision.

Animations

Choose how the overlay appears and disappears:

  • Pop - The overlay scales into view
  • Slide-up - The overlay slides up from the bottom
  • Fade - The overlay gradually fades in and out

Link configuration

Configure the interactive behavior of your overlay:

  • URL - Enter the destination URL when the overlay is clicked (required). You can link to web pages, PDFs, documents, other videos, email programs, etc.
  • Jump to video time - Optionally jump to a specific time in the video or to another annotation when clicked. You can select from existing annotations or enter a custom time.
  • Pause video at link click - Automatically pause the video when the link is clicked
  • Pause video when link appears - Pause the video when the overlay first appears
  • Require link click to continue - Force viewers to click the link before the video continues
  • Action to take if viewer doesn't click - Choose what happens if the viewer doesn't interact:
    • Continue playing - The video continues normally
    • Loop back - The video loops back to the beginning of the annotation, useful for branching menus or ensuring interaction. This creates a more viewer-friendly experience compared to automatically proceeding.

Advanced settings

For advanced customization:

  • CSS Class - Add custom CSS classes for additional styling. The class will be activated when the annotation is clicked or interacted with. You'll need to include this CSS class in a custom stylesheet at either the project-level or account-level CSS settings.
  • Display Rule - Use JavaScript expressions to conditionally display the overlay. Display rules allow you to show or hide annotations based on viewer actions or variables. For example, you can display an annotation only when a viewer clicks on a different annotation, or based on quiz results. The expression must evaluate to TRUE for the annotation to be displayed.
  • JavaScript - Enter JavaScript variable names or variable assignments. When the annotation is clicked, the variable assignment code will be executed. This is useful for creating dynamic, adaptive video experiences. Variable names must begin with a letter, underscore (_), or $.

Completing the link overlay

  1. After configuring all settings, click Done.
  2. Click Embed to generate the embed code.
  3. Click Preview, play the video and confirm that the overlay appears at the correct time and functions as expected when clicked.