Adding a Text Overlay to a Video

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

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

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.

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

Selecting a text style

When you first click the text overlay icon, you'll see style options to choose from:

Text style selection options

The style options include:

  • Simple styles - Four visual treatments for plain text (standard, solid background, outline, or with shadow effect)
  • Font styles - Choose from Typographic, Cursive, Funny, or Modern font options
  • Button styles - Pre-designed button options for link overlays

Configuring the text overlay

After selecting a style, the Text editor panel provides comprehensive options for customizing your text overlay:

Text overlay editor panel

Content

Enter the text content that will appear in the overlay. This is the message or call-to-action you want to display to viewers.

Timing

Set when the text 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.

Style

Customize the visual appearance of your text:

  • Font - Select from available font families
  • Size - Set the text size
  • Text Color - Choose the color of the text
  • Background Color - Set the background color (or make it transparent)

Animations

Choose how the text 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

Make your text overlay clickable by configuring link settings:

  • URL - Enter the destination URL when the overlay is clicked. 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

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 text 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 with the desired appearance.