Click "Watch" and a video pops up

Hi! I am trying to create a workflow where a user clicks a “Watch this video” button and a video pops up full screen and once it is over, the index page resets. I’ve scrolled through some feeds but am still having trouble. If someone can send me some quick steps to accomplish this, I’d really appreciate it.

Thanks! Mike

This is doable, but not with any prebuilt solutions on Bubble (meaning no “quick steps” to make this a reality, depending on how you define quick :wink:) I don’t want to discourage you from trying to create a solution, whether that’s by yourself or hired out to a developer, so I’ll share how I imagine this could be done from a high-level/bullet point perspective:

  • Embed a video player in a HTML element (within a popup, or not, depending on what you mean by full screen) capable of sending and receiving JavaScript events such as https://videojs.com or https://www.jwplayer.com
  • Set the video player to autoplay mode when on screen (so when a popup appears, the video within it plays automatically)
  • Detect when the video has completed by listening for a JavaScript event (both players I mentioned have APIs which allows this)
  • Using a Bubble plugin like Toolbox, connect the JavaScript complete event to a Bubble workflow that is responsible for closing the window your video player is contained within as well as reloading the index page

Hope this helps get you started.