Workflow action to stop video playing

No because the original video continues playing in the background, even though it is hidden.

Yes, but you must admit, getting a video to stop playing should not require javascript knowledge to do something this basic.

what knowledge do you need ??? you literally just copy and paste something from stack overflow. ez

Well first you would need to know where to find the workflow item that runs the javascript.

Then you would need to know which code to select.

I selected the first one (most popular) and it didn’t work.

So it isn’t as easy as you claim.

1 Like

I’ve tried 3 more sets of javascript, and none worked…but come on, it’s just so easy, anyone can do it.

and no plugin

Please try this:

Thanks, but it didn’t work.

Thanks for all the help, but I’m going to have @romanmg take a look at this tomorrow. I’ve wasted too much of my time on this today.

I still stand by my position that this should be native functionality in Bubble. It should not require javascript, plugins, or acrobatic workflows to do something this basic.

1 Like

You can actually do this just by setting a state on the video element, and changing it in a workflow.

Create a state called videoID. When the group containing your video is visible, set state to the ID of the video you want to play. When the group is not visible, set state to no value. Then, your video elements ID for the actual video is the value of the custom state “this element’s videoID”. Works like a charm. I use it in all the videos in one of mine.

6 Likes

Thank you, @jcindy81. We are implementing this now.

You’re welcome. I’m glad it worked out for you! I know it was a hassle when I ran into that when I first started.

Hello @jcindy81. I found this topic and your solution here and tried several times but failed. Maybe I did not get your point correctly. So I deeply need your help to solve it.
Actually, I have 2 button (button 1 to call for video 1 and button 2 to call for video 2), 1st group containing video (element) 1 and 2nd group containing video 2. The 1st group is set to visible on pageload while 2nd group is not
As guided by you in this topic, I creating the state called videoID1 for the video in the 1st group with yes/no type and default value is set to no. The same was created for the video in the 2nd group.
Then I created workflow like this:

  • when button 1 is clicked > show group video1 > set state videoID1 to yes > hide group video 2 > set state video2 to NO
  • when button2 is clicked > show group video2 > set state videoID2 to yes > hide group video 1 > set state video1 to NO
    Result: the problem is still there: when video 1 is playing, if I click on button 2 then video 2 is showed but video 1 still playing invisibly…
    Pls kindly tell me what’s wrong and how I can get rid of it.
    Thank you.

Hello. In the example above, the state VideoID is not a yes/no value. It is the actual video ID (in this example, a YouTube video ID) that you are wanting to play. When you need to switch the video off, the custom state is set to no value, meaning a blank value.

1 Like

Thanks for your reply but it’s still over my head. As my understanding, I can not creat a state without giving it a state type. Then how to set state videoid to the actual video ID taken from url?

Regards,

The state type would be “text”. So, when the video is to be played, the state is set to the value of your video’s ID (y67gh3SH8) or whatever the YouTube ID is. When the video is to be shut off, the state is set to a blank value.

1 Like

What I do to stop a video from playing in the background once a pop up is closed is to simply use a conditional that when pop up is not visible change video url id to 0

2 Likes

I got it. Thanks for your help, @jcindy81

Hello @phrase9. I tried with your way and it worked well. Very simple indeed.
Thanks for your great idea!

1 Like

Glad it helped!