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

None

Route Params

None

Component Attributes

data-cc-component="video" – Identifies and initializes the component
data-cc-component-video-id=<video_id> – (string, required): Unique identifier used to match video events to this component.
data-cc-component-poster-src="https://greatoverlayimage.jpg" – (string, optional): URL to the poster file

Custom Behavior

Fetches video metadata from API and populates video source, poster, and captions
Sets up video controls based on configuration (default, webinar, or replay mode)
Applies responsive styling to video element
Listens for video events and sends messages to orchestrator:
- started (on play)
- paused (on pause)
- completed (on ended)
- seeked (on seek, with 500ms debounce)
- progress (every 1 second during playback)
Skips hidden video components (e.g., mobile/desktop duplicates)

Example

Embed Code

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

Copy the Video component from your base project.
Paste it into your Webflow project where needed.
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-poster-src="https://cdn.example.com/poster.jp‍
‍

Adding to an existing site

‍

Create a wrapper div and add all relevant data-cc-component-* attributes as above.
Publish and test

Styling notes

This component is styled by the parent element.