Video

The Video component listens for custom messages emitted from a video player and conditionally shows or hides an associated trigger button based on defined checkpoints. It's designed to let users interact with the page (e.g., reveal a CTA) at specific points in a video.
‍

Props

  1. data-cc-component-video-id – (string, required): Unique identifier used to match video events to this component.
  2. data-cc-component-checkpoints – (comma-separated numbers, optional): A list of numeric checkpoints (in seconds). These define at which points the trigger button should show or hide.
  3. data-cc-component-offer-url – (string, optional): URL to the offer/CTA page
  4. data-cc-component-poster-src – (string, optional): URL to the poster file

Route Params

  • None

Component Attributes

  • data-cc-component="video" – Identifies and initializes the component

Custom Behavior

  • Listens for orchestrator video messages:
    • video_started
    • video_completed
    • video_checkpoint
  • On video_checkpoint, it:
    • Looks up the wrapper by video-id
    • Locates the .video-trigger-button inside that wrapper
    • Shows or hides the button based on the checkpoint’s index:
      • Even-indexed checkpoint → button is shown
      • Odd-indexed checkpoint → button is hidden

Example

1<video controls>
2  <source />
3  <track kind="captions" label="English" srclang="en">
4  <p>
5    Your browser doesn't support HTML video. Here is a
6    <a class="fallback-link" download="video.mp4">link to the video</a> instead.
7  </p>
8</video>

Adding to a new site

‍

  1. Copy the Video component from your base project.
  2. Paste it into your Webflow project where needed.
  3. Add the following custom attributes to the wrapper element:
    • data-cc-component="video"
    • data-cc-component-video-id="7d8e63d0-710f-41a3-8d8c-6e752c6239d4"
    • (optional) data-cc-component-offer-url="https://yourdomain.com/offer"
    • (optional) data-cc-component-checkpoints="15,30,45"
    • (optional) data-cc-component-poster-src="https://cdn.example.com/poster.jpg
    ‍
  4. Inside the wrapper, include a .video-trigger-button element.

Adding to an existing site

‍

  1. Create a wrapper div and add all relevant data-cc-component-* attributes as above.
  2. Add a .video-trigger-button element inside.Make sure your video player:
    • Matches the video-id from the wrapper
    • Sends messages of type video_started, video_completed, or video_checkpoint via window.postMessage
  3. Publish and test the behavior (e.g., does the button toggle at the right time?)

Styling notes

This component is styled by the parent element.