How to embed YouTube videos

Hi. I’m making a new site for a forthcoming festival at my school. And then we uploaded some videos about our school but if you use a smartphone, you move to YouTube App for some reason. I want to embed the videos on the website. If you know some tips to do that, please let me know. I’m actually in a rush to get ready for it to come.

1 Like

Welcome to the Bubble community! :wave:

You can use the video element and put in the YouTube ID and it will keep them on the page. :blush:

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
2 Likes

Here are 3 ways:

  1. Embed a single video. - Go to any public or unlisted Youtube video, press “Share” → “Embed”, and copy the <iframe /> code. And insert it in your Bubble app in the HTML element.

  2. 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.

  3. Parse the URL and embed the video. - 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 not understand it, mistype something, or input the wrong parameter. It might not be the best user experience, and in general, it’s error-prone. In such cases, it could be better to accept any video link, parse it, extract the video ID, and then construct the embed code.

We describe all three approaches with images, video, and tips here - How to embed Youtube videos in Bubble apps

3 Likes

Hi, great video!
However, i cannot make the method #3 work.
You shared a bubble app exemple link
Could you also please share a link to the editor, so i can check where i missed something ?
Thanks a lot!