How do I make a button on my website open a video?
Turning a button into a video trigger takes one small change: set its link destination to #reelflow-player-open instead of a normal URL. Publish the page, make sure an Overlay Flow is live on it, and clicking the button opens the ReelFlow video player immediately. No script, plugin, or developer ticket required.
What do you need before you start?
- A published Overlay Flow. The button needs a live video to open - confirm one is published on the page.
- Access to the button's link settings. Most website builders and CMS platforms expose a URL, link, or href field per element.
- A verified install code. Confirm ReelFlow's script is installed and working from Settings > Install Code in the dashboard.
Step-by-step: setting the link
- Select the button. Open it for editing in your website builder or CMS.
- Find its link field. Usually labelled URL, Link, or href.
- Enter the reserved value. Type
#reelflow-player-openexactly, including the hash symbol. - Publish the page. Changes need to go live before the trigger works.
- Click to test. The Overlay Player should open right away.
What if my builder doesn't have a link field for that button?
Some page builders style buttons in a way that hides the link field, or use component-based buttons that only accept CSS classes. In that case, attach the class .reelflow-player-open to the element instead - it produces the same result as the link method.
How do you make a button close the video too?
The same approach works in reverse. Set a link destination to #reelflow-player-close (or the class .reelflow-player-close), and clicking it returns the Player to its closed, eye-catcher state.
What if this button needs to control one of several videos on the page?
The reserved link and class only target whichever Overlay Flow is on the page - if there's more than one, they can't tell them apart. In that case, use the ReelFlow Player API instead, which lets a button call a getFlow method to target one Flow specifically by ID.
FAQ
Do I need the eye-catcher turned on for this to work?
No. You can disable the eye-catcher entirely in the Flow's activation settings and rely on your button as the only way visitors launch the video.
Will this work on any website platform?
Yes. As long as the platform lets you set a link destination or add a CSS class to an element, the method works the same way regardless of CMS.
My button isn't doing anything after I set the link. What's wrong?
Double-check the value is exactly #reelflow-player-open, with no extra spaces or characters, and confirm the ReelFlow install code is verified on that page.
Does the button's design or styling matter?
No. The trigger is purely functional - any button, regardless of its colour, size, or styling, works the same way once the link is set.
Related questions
Yes. ReelFlow lets you open its interactive video player from any button, link, or image on your page – no code required. Set the element's link destination to a reserved value (#reelflow-player-open) or attach a CSS class (.reelflow-player-open), and clicking it launches the Overlay Player instantly. For more advanced control – like managing multiple Flows on one page or firing custom third-party events – the ReelFlow Player API gives developers full programmatic access.
Yes. ReelFlow's trigger method isn't limited to buttons - it works on any clickable element you can attach a link to, including images and logos. Point the image's link destination to the reserved value #reelflow-player-open and clicking it launches the Overlay Player, exactly as if it were a button.
You don't need to rebuild anything. Open the existing button's settings, find its link (URL or href) field, and replace whatever's there with ReelFlow's reserved value #reelflow-player-open. The button's design, size, and position all stay untouched - only its click behaviour changes. If the button doesn't expose a link field, adding the .reelflow-player-open CSS class does the same job.
Yes. ReelFlow doesn't distinguish between a button and a text link - both are simply clickable elements with a link destination, and both work the same way. Point a text link's href to #reelflow-player-open and clicking the words launches the Overlay Player, just as a button would.
Turn any button into a video button
Set a single link value and any button on your site becomes a one-click way to launch ReelFlow's interactive video player.