Skip to Content
Engage and monetiseAdding Video Overlays

Adding Video Overlays

Video overlays are visual or interactive layers placed on top of your main video content. In Cinema8, you can use overlays to boost engagement, add context, promote actions, or reinforce your branding—without interrupting playback.

Overlays can be built using:

  • Widget Elements – for CTAs, info cards, lower thirds, etc.
  • Image Elements – for branding and static visuals
  • Video Elements – for embedded video segments, highlights, or effects

Option 1: Adding Overlays with Widgets

Widgets are best suited for overlays that require interactivity—like guiding actions or showing info without disrupting the video.

Step 1: Open Creative Studio

  • Log in to Cinema8 and open your project in Creative Studio.

Step 2: Choose a Widget

  • From the Elements Panel, select a widget overlay:
    • Lower Third — Speaker info, titles, branding
    • Pop-up Card — Display extra content or prompts
    • Call-to-Action — Encourage sign-ups or clicks
    • Info Card — Share detailed explanations or specs

Step 3: Drag the Widget Onto the Timeline

  • Place the widget at the desired time in your video.

Step 4: Customise the Widget

  • Use the Properties Panel to configure:
    • Start and end time
    • Positioning and dimensions
    • Text, media, or links
    • Interactivity (e.g., open link, toggle visibility)
    • Animations for entry/exit effects

Step 5: Preview and Save

  • Use Preview Mode to confirm the overlay works smoothly.
  • Save your project when you’re ready.

Option 2: Adding Image Overlays

Use image overlays to add logos, watermarks, or static visual enhancements.

Step 1: Open the Image Element

  • From the Elements Panel, select the Image Element.

Step 2: Drag the Image onto the Timeline

  • Position it at the correct timestamp.

Step 3: Customise the Overlay

  • In the Properties Panel, configure:
    • Timing and visibility
    • Image file (upload or select from gallery)
    • Position (top/left) and size (width/height)

Step 4: Preview and Save

  • Check positioning and responsiveness in preview.
  • Save your video when complete.

Option 3: Adding Video Overlays

Video overlays are helpful for adding short clips, background visuals, or highlight sequences.

Step 1: Select the Video Element

  • Open the Elements Panel and choose Video Element.

Step 2: Add to the Timeline

  • Drag the video overlay to the appropriate point in your timeline.

Step 3: Configure Video Properties

  • Adjust in the Properties Panel:
    • Start/end times
    • Positioning and dimensions
    • Player controls (on/off)
    • Optional skip or auto-play settings

Step 4: Preview and Save

  • Use Preview Mode to ensure smooth playback.
  • Save when finalized.

Overlay Design Tips

🎯 Pro Tip: Use overlays to enhance—not interrupt—the viewing experience.

  • Keep overlays contextual – Only show them when they add value.
  • Use consistent branding – Match colors, fonts, and styles with your brand identity.
  • Make them accessible – Use readable text sizes and proper contrast.
  • Test placement – Use A/B testing to refine timing, animations, and CTA performance.

Next Steps

Start enhancing your video experience with overlays today.

Want to go further?

HTML ElementGenerating Leads with Adaptive Intro Forms