In this Quick Tip, we're going to learn about the video element.

The video element lets you embed a video directly onto the page, perfect for marketing pages as well as dynamic video apps like the Academy.

First, we have the video source where we can choose from either Youtube or Vimeo. From there, we'll need a Video ID to function properly, as we will get an issue without one. This ID is the ID from the video that can usually be found at the end of the source URL. The ID can be hardcoded into the element like so if you only needed this element to play this one video. But you can also input dynamic data so you can store the video ID as text in the datatype so the video element could play many different videos depending on the value of the expression.

With our video source and ID properly set up, we have some additional controls over the video player.

First, we can check this box to automatically play the video when the page loads. We can also check this box if you wanted the video to replay when it ends. This will loop the video without the user having to restart it.

Finally, if we’re using Vimeo, we can customize the color of the video player to personalize it a little more.

One thing to note, Bubble does not have access to play/pause states for an embedded video. That is directly controlled from the source itself.

To force the video to stop playing, if the group containing the video is hidden, you can use a conditional to change the video ID to be blank.

Experiment more by adding your own videos by using the video element.

That’s it for this Quick Tip! For more, be sure to check out bubble.io/academy.
​