Picture of a person choosing an icon on a virtual screen. Rapid Developers
/Bubble Development Agency

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

Discover the simple steps to embed a video player in your Bubble.io app with our comprehensive guide. Boost user engagement effortlessly!

Explore more
A person working at the laptop. Rapid Developers

Hire an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Explore more

How to embed a video player in Bubble.io?

Embedding a video player in Bubble.io enables you to incorporate video content from platforms like YouTube, Vimeo, and Ziggeo directly into your app. Here's how you can do it step by step.

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

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

Step 3: 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.

Step 4: 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.

Step 5: 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.

Step 6: 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.

Tip: 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!

Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation