How to embed a video player in Bubble.io: Step-by-Step Guide

 

 

Log in to your Bubble.io account and navigate to the editor of your app.

 

 

Decide where you would like the video player to appear on your page, and then click on the location to select it.

 

 

Go to the visual elements menu on the left hand side of the screen and select the "Video" element to add a video player to the page.

 

 

Once you have added the Video element to the page, you should see options to configure this video player in the property editor on the left.

 

 

You will need to provide a video source for your player. If you're embedding a video from YouTube or Vimeo, you'll need to set the "Video source" property accordingly and provide a link to the video or the video ID.

 

 

If you're using Ziggeo and have the plugin installed, select "Ziggeo" from the video source options to display videos recorded by your users. You'll also need to set the "Video ID" with the specific video to display, which can be a dynamic expression based on your app's logic.

 

 

Keep in mind that the Bubble engine does not monitor the play/pause state of an embedded video. Once started, the video will continue to play unless manually stopped. However, you may use conditional states to control the playback. For example, to stop the video when its container is hidden, consider using a workflow to change the video's ID to null, forcing the video to stop.

By following these steps, you should be able to successfully embed and control a video player in your Bubble.io app. Enjoy enriching your app with multimedia content!