all articles

How to embed Youtube videos in Bubble apps

Andrii Bas
Founder & CEO at Sommo
How to embed Youtube videos in Bubble apps
Create 10x faster with Sommo
✓ 9+ years experience
✓ 100+ products developed
✓ no-code&code expertise
✓ in-house development
contact us
Create mobile app with Natively
✓ automated conversion
✓ for any website/web app
✓ mobile native features
✓ updates without release
try Natively

Youtube is probably the biggest video hosting service in the world. And naturally, you might need to embed Youtube videos in your Bubble applications.

While the embedding of a single video is relatively straightforward, the embedding of the dynamic video or parsing of any Youtube video URL is a bit more complex. In this article, we’ll dive into 3 use-cases:

  1. Embed single video;
  2. Embed a video by Video ID;
  3. Parse the URL and embed video;

Plus, we’ll share a few tips and tricks on how to work with embedded videos in the list.

Embed single video

Go to any public or unlisted Youtube video, press “Share” → “Embed”, and copy the “<iframe />” code.

How to embed Youtube videos in Bubble apps

And insert it in your Bubble app in the HTML element.

How to embed Youtube videos in Bubble - insert in the HTML element

Check out such a version of the app in this demo example.

💡 Tip: check out Google documentation on different parameters you can customize for your Youtube video player. For example, to make the video loop itself, set “loop=1” and the “video ID” in the “playlist” value, as in the example.

Embed a video by Video ID

In cases when you’d need to embed different videos, you’d need to insert dynamic video IDs. Video ID in the Youtube link is the value for the “v” parameter in the URL.

Here’s a simple app that takes the video id from the input field, and inserts it in the <iframe /> code.

How to embed Youtube videos in Bubble - insert dynamic video IDs

Parse the URL and embed the video

So far it was easy. However, not always you’d have the video ID. You might have the API or database that already has full video links.

Or it might not be a good idea to ask your users to input the video ID, cos they might simply not understand it, mistype something, or input the wrong parameter. It might be not the best user experience and in general, it’s error-prone.

Moreover, there are different Youtube video link formats, for example:

  1. https://www.youtube.com/watch?v=vCCC3gth0Zg
  2. https://youtu.be/vCCC3gth0Zg
  3. https://www.youtube.com/embed/vCCC3gth0Zg

In such cases, it could be better just to accept any video link, parse it, extract the video ID, and then construct the embed code. This is exactly what we’ll do.

To start with, install the “Toolbox” plugin, we’ll need it for the “Javascript to Bubble” element. Add this element on your page.

How to embed Youtube videos in Bubble - “Javascript to Bubble” element

Now we’ll need a bit of JS code to parse the URL and extract the Video ID. We’ll do it with this piece of code (that I’ve found through trial and error).

How to embed Youtube videos in Bubble - parse the URL and extract the Video ID

The full code is here:

```

function getVideoIdFromYoutubeLink(link) {

const url = link.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);

return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];

};

function createYoutubeLink(videoId) {

 return 'https://www.youtube.com/embed/' + videoId + '?loop=0&playlist=' + videoId + '&autoplay=1&rel=0&modestbranding=1&fs=1&autohide=1&iv_load_policy=3';

};

const videoId = getVideoIdFromYoutubeLink("<<Input Youtube Link's value>>");

if (!videoId) {

bubble_fn_MY_LINK("");

} else {

bubble_fn_MY_LINK(createYoutubeLink(videoId));

}

```

This code parses all 3 types of links and extracts the video ID as the text “value” of the “Javascript to Bubble” element. Then use this value as the Video ID in the “HTML” element to construct your “<iframe />” as in the previous example.

Check out the app demo that does it here: https://youtube-video-embed.bubbleapps.io/version-test/

Check out the full video guide of this article here in the video:

Best practices and tips & tricks

Here are some final tips for working with embedded videos.

💡 Tip 1: add dynamic unique names to your “Javascript to Bubble” element name if you put them in the Repeating Group.

How to embed Youtube videos in Bubble - dd dynamic unique names to your “Javascript to Bubble” element name if you put them in the Repeating Group

And then call “bubble_fn” by this link when you’ll need to pass the value to the element.

How to embed Youtube videos in Bubble apps

Cos in the Repeating Group elements should have unique IDs. Without the dynamic name, your logic most likely would not work.

💡 Tip 2: Use “Elements → A Javascript to Bubble event” if you need to work with the result of the “Javascript to Bubble event” in your workflow (for example, if you’d want to save it to the database, or pass it to the Popup element).

How to embed Youtube videos in Bubble - Use “Elements → A Javascript to Bubble event” if you need to work with the result of the “Javascript to Bubble event”

Note: the element would publish this event only if you turn “ON” the “Trigger even” on the “Javascript to Bubble” element.

Conclusion

That’s it on how to work with an embedded Youtube video player in Bubble. Hope you find it useful. Check out more of our plugins and templates here.

If you need help bringing your own app to life — don’t hesitate to contact us.


Andrii Bas
Founder & CEO at Sommo

Related posts

How to reuse components with Reusable elements and Popups | Bubble

This article will show how to use powerful Bubble features such as reusable elements and passing data to the popups to display data records in different places without any duplication.

how-to
tech talks
bubble

How to reuse components with Reusable elements and Popups | Bubble

Why use Bubble no-code platform for your project

Can the Bubble no-code platform bring your idea to life in a fraction of the time that traditional software development does? We’ll lay out the possibilities and limitations of Bubble in this article and help you make an informed decision.

bubble
tech talks
mvp
enterprise

Why use Bubble no-code platform for your project

Have an idea?
Let’s build your app 10x faster!

CONTACT US
Sommo development agency on ProductHunt
We are live on
!
Your support will help us a lot!