How do you make a video and a webpage interact with each other?
The interaction runs in both directions. A button, link, or image on the page can open, close, or switch the video using ReelFlow's reserved link values or the Player API. Going the other way, clicking an Action Button inside the video can fire a JavaScript event your page listens for, letting it update text, images, or other content in response. Together, these two directions let the page and the video genuinely react to each other.
Page to video: controlling the video from the page
Any button, link, or image can launch or close the Overlay Player using a reserved link value (#reelflow-player-open / #reelflow-player-close) or CSS class, no code required. For more control, like targeting a specific Flow on a page with several, the Player API's getFlow() and player.show()/hide() methods do the same job programmatically.
Video to page: reacting to what happens inside the Flow
Going the other way, each Action Button click inside a Flow fires an actionButton:click event. Custom JavaScript listening for that event can update anything on the page - swap text, reveal a stat, change an image, or switch to an entirely different Flow.
What does a full two-way setup look like?
- A page button opens the video with a reserved link or the Player API.
- The visitor clicks through the Flow, choosing a path relevant to them.
- Each Action Button click fires an event your page listens for.
- The page updates in response, showing content that matches the path they're on.
Can the video and page swap control of each other mid-visit?
Yes. ReelFlow's own documented examples include running multiple Overlay Flows on one page and switching between Inline Flows and page content together, both built on the same underlying API.
Does any of this need a developer?
Opening or closing the video from the page doesn't - that's link-based and no-code. Making the page react to what happens inside the video does need a developer, since it runs on custom JavaScript listening to the Player API.
FAQ
Can a button on the page control which Flow plays?
Yes - use ReelFlow.getFlow() to target a specific Flow by ID and call player.show() on it.
Can the video close itself based on a page action?
Yes, if you wire a page element to call player.hide() via the Player API.
Is this two-way interaction available out of the box?
The page-to-video direction is out of the box. The video-to-page direction needs the Player API and a small script.
Does this work for both Inline and Overlay Flows?
Yes, both Player types support the same API methods and events.
Related questions
Yes. ReelFlow's own documentation showcases this exact pattern - the video Player and the surrounding page reacting to each other in real time. The mechanism runs through the Player API: as a visitor clicks an Action Button inside a Flow, an actionButton:click event fires that your page's JavaScript can listen for, and that event can trigger any content change - swapping text, revealing a stat, changing an image, or more. It's driven by the visitor's interaction with buttons timed to specific moments in the video, not automatic real-time speech detection.
Syncing content to a video comes down to one event: actionButton:click. Using the Player API, you get a Flow instance, listen for that event, and write custom JavaScript that runs whenever a specific button is clicked, updating text, images, or any other element on the page at that moment. The sync happens at each click, in step with wherever the visitor is in the Flow.
Yes - with a caveat on how automatic it is. Text and images can update at specific moments during a video, triggered by a visitor clicking an Action Button inside the Flow. That click fires an actionButton:click event through the Player API, and custom JavaScript listening for it can swap text, change an image, or reveal new content the instant it happens. It isn't a continuous, frame-by-frame read of the video - the update points are tied to wherever Action Buttons are placed in the Flow.
Yes - with an important detail on how it works. The trigger isn't ReelFlow listening to the audio itself; it's an Action Button placed at the moment something specific is being said, which the visitor clicks. That click fires an actionButton:click event through the Player API, and custom JavaScript listening for it can reveal a stat, quote, or callout anywhere on the page the instant it happens.
The more interesting uses go beyond a single video playing once. Branching Flows let a visitor choose their own path through short reels rather than watch one long video. The page and video can react to each other in real time, revealing stats or swapping content as a visitor clicks through. Several Flows can run as a spotlight across different sections of one page, video interactions can launch a chat tool directly, and engagement data can flow into a CRM via UTM attribution. Together, these turn video from a passive asset into a working part of the page.
Get your video and your page talking
Control the video from the page, and let the page react to the video - ReelFlow's Player API supports both directions.