How to stop Youtube video with workflow?

Hi everyone!

So, I have a group that displays a video.I have a workflow setup to show/hide the group as necessary. But, if the user has pressed play on the video and then they close the window (hide the group), the video KEEPS playing invisibly, but the user can still hear it playing. I need a way to stop the video from playing if the group is hidden.

Any ideas?

1 Like

Any thoughts on this? @NigelG, @potentialthings, @Kfawcett

That one can be done by reseting a group that contains the youtube video. so the way you’d do it

  1. have a group displaying the type of content that has the video ID (if there isn’t, create one).
  2. have the video inside refer to the parent group’s thing’s video ID (or whatever it is)
  3. display data in the group with an action to start the video
  4. reset the group to stop it.
1 Like

Ok, I have a “close window” button that hides the group (it works like a popup window). For the workflow on that button, I can’t seem to figure out how to reset the video in the group to make it stop playing.

I tried reset relevant inputs (as that’s all I could find), but that didn’t work. @emmanuel

Thanks for the help!

Reset group is what you need, not input (there isn’t any input here).

Great, that worked! Seems rather obvious now that you’ve pointed it out heh.

Next, is there a way to make the group window resizeable by the user? Thereby they can make the video whatever size they want for viewing?

No, but they can make it full screen.

OK, cool, thanks!!

Hey @emmanuel, do you guys have a tutorial on having a user enter their city/state/zip and then entering those as data and so in the future other users will be able to search against that?

Imagine a dating app where you only want to see people near you or within a certain amount of miles.

Thanks!

I’d pop that in a new thread so others can find it.

1 Like

Good Idea @potentialthings

I have a video visual element placed inside a group and am still experiencing the same problem after resetting group in the workflow. An elaboration on steps 1-3 would be greatly appreciated. Thanks!

Can you try something on an open app so that other users can jump in and modify it?

I set up a video pop-up here, but still can’t get the video to stop upon closing:

Preview: https://video-test.bubbleapps.io/version-test/index?debug_mode=true
Editor: https://bubble.io/page?name=index&id=video-test&tab=tabs-1

Any help is appreciated.

Able to clarify your explanation by any chance? Trying to understand how to stop video upon close. Thanks again!

Preview: https://video-test.bubbleapps.io/version-test/index?debug_mode=true
Editor: https://bubble.io/page?name=index&id=video-test&tab=tabs-1

Did you see this? You have to send data to a group, so you need to define a type for the videos. Happy to look at your app but you should create this first.

1 Like

Wow, it worked. Here is the solution with a little bit more details.

First of all:

1- Create a type called Video
2- In this type create a field called Video ID
3- Enter your YoutubeID, as a value to this field in the database.

Then:

3- Create a group and select type of content as Video (DO NOT select a DATA SOURCE here. If you select a data source here, it messes it up and you end up wasting hours like me)

4- Insert a video into this group and select youtube as video source and select Parent Group’s Video’s Video ID.

5- Add the trigger to initiate a workflow such as pop up open/close, buttons etc…

Lastly in the workflow - lets say you are using buttons.

6- When button X (Start) is clicked - show the Group X then Display Data in Group X / under elements actions.

7- when button Y (Stop) is clicked - Reset Data in Group X and Hide Group X / under elements actions.

Then it works.

6 Likes

Good day Emmanuel, I have follow your suggastion but unfortunately can’t figure out what I’m doing wrong. When I closing popup video is continue playing :(( Please take a look at the public app I have created for a test purposes https://bubble.io/page?type=page&name=home&id=testmyappp&tab=tabs-1

I would appreciate if somebody can help me with that. The idea is to open video in popup and then stop it when the popup is closed.

Another thing I can’t solve is when I’m trying to watch video on the phone and tilt the phone from landscape to portrait then video start plan from the beginning. Is there any way to do that without reseting video?

Thank a lot guys!

Hey @oleksiy :slight_smile:

I took a quick look at your app and I think it’s giving you trouble because the popup is a reusable element, which contains a repeating group - making it a little tricky to ensure the data source gets reset. It’s possible to set it up in that way, but I think it may be easier to not have it be a reusable element. I didn’t want to alter your setup, so I created a new page in your app called “test”:

Editor Link:
https://bubble.io/page?type=page&name=test&id=testmyappp&tab=tabs-1

Preview Link:
https://testmyappp.bubbleapps.io/version-test/test

On this page, once Watch is clicked, that cell’s Video data is displayed in the popup:

The setup for the popup is:


*The data source is empty by default, so that when it resets once the popup is closed, it doesn’t continue to play a video. The data source is only not empty when data is sent to it after clicking “Watch”.


Here the data source of the video player is the Parent Group Popup’s data source, which is displayed depending on which repeating group Video cell the User just clicked on.

And in preview mode the page looks like this:

When Watch is clicked, the selected video is displayed in the popup and plays automatically:

When the User clicks out of the popup, the popup ‘resets’, and the video stops, when the popup is closed.

I’m not sure if the video will automatically resize when the phone screen is rotated, but I think it should as long as the popup is not set to fixed width. If it doesn’t, we can try to get that part working as well!

And that should do it :slight_smile: Feel free to let me know if you have any questions!

3 Likes