Thanks for any tips on this.
I have a group with a vimeo video in it.
What I would like to do, is say at a certain point in the video say at the 5 minute mark. It will automatically trigger a different group to open.
How would you do this?
Thanks.
Hey, to do it we’ll need to add the plugin toolbox and import a vimeo script. Here is how to do it:
1. Enable the Required Settings
- Go to Settings > General
- Scroll to the bottom and check the option:
Expose the option to add an ID attribute to HTML elements
2. Add the Hidden Group
- Drag a Group element onto the page
- Set it to be hidden by default:
Uncheck “Visible on page load”
Check “Collapse when hidden”
3. Add a Vimeo Video Element
- Drag a Video element onto the page
- Select Vimeo as the video source
- Paste the Vimeo URL
- Assign it an ID (e.g.,
vimeo-player
)
4. Add Vimeo API Script to the Page Header
-
In the Elements Tree, select the Page
-
Go to Page HTML Header and add:
<script src="https://player.vimeo.com/api/player.js"></script>
5. Add a Workflow - “When Page is Loaded”
- Add a new workflow → “When page is loaded”
- Add a pause → to make sure the vimeo video is loaded
- Add an action: “Run JavaScript”
- Paste the following code (adjust the
3
seconds as needed):
- make sure to match the id you put on the video elemen
const iframe = document.querySelector('#vimeo-player > iframe')
if (!iframe) {
console.error("Iframe not found!");
} else {
const player = new Vimeo.Player(iframe);
let triggered = false;
player.on('timeupdate', function(data) {
if (!triggered && data.seconds >= 3) {
triggered = true;
bubble_fn_custom_function();
}
});
}
6. Add the “JavaScripttoBubble” Element
- Drag a JavaScripttoBubble element onto the page
- Set the suffix to:
custom_function
Check the “Trigger event” checkbox
7. Add a Workflow - “JavaScript to Bubble Event”
- Create a new workflow → “JavaScript to Bubble event”
- Add an action: Show or Animate the hidden group
Final Notes:
- The function
bubble_fn_custom_function()
is what triggers Bubble’s workflow when the video reaches the specified time (3 seconds in this case).
- Adjust the
data.seconds
value in the JavaScript if you want to show the group at a different time.
- Make sure the IDs match (i.e.,
#vimeo-player
).
Demo: https://rafael-gaitan.bubbleapps.io/version-test/vimeo-trigger
Editor: https://bubble.io/page?id=rafael-gaitan&tab=Design&name=vimeo-trigger&type=page
Let me know if it worked! 
1 Like
Thank you for the response. Will give it a try.
1 Like