How to display YouTube videos using embed code and dynamic data on Bubble.io

Embedding YouTube Videos with Dynamic Data in Bubble.io

Let's say you're working with YouTube embed code rather than the built-in video element in Bubble and you'll quickly realize that it takes a little bit more work because your video has a set width even though my HTML element, let's take it right the way up to the edge, is near to 800 pixels across. When I take the embed code from YouTube it sets a width here and if you know that there is a set width that you want to use in your app feel free you can tinker with these values and see if you get the desired effect. But if you want it to be truly responsive we have to take another step and a quick Google search rather, came up with this website and so I can take a video URL and I can paste it in and it generates a different HTML code and I can quite take that and I can paste it in there and even in the editor it shows that it's now edge to edge.

Previewing and Adjusting the Embedded Video

I can hit preview and there we go my video now fills in the space around, it fills in the container. I just noticed I have and this can catch you out sometimes when you load in an HTML element especially if it's set to default you'll notice it contains padding and that can stop you from getting the nice edge to edge effect. There we go now it is edge to edge with the box that the video is sat in.

Working with Dynamic HTML Code

So how do I go about working with this HTML code? Well the bit that makes the video unique is the video ID which is just this part here and I can insert dynamic data in so that this can become a template for any video if I was to create a website that is beginning to look a little bit like YouTube. So I need to create a data type called video and then I'm just going to add two fields I'm going to add title and ID. Oh, auto correct in there. I'll fix that here there we go I don't want to auto correct it. Right so yeah two fields title and ID and I don't have a front-end form created so I'm going to create an example of this data type in the back end. It's a new entry I have the tiger and the video ID which is just this bit here.

Making the Page Dynamic

Okay and now at the moment this page has got nothing dynamic about it but we can make it dynamic make it act like a template page really easily. So we're going to change the content type to the data type we created video and then going to make this a little bit larger and instead of just saying videos I'm going to say current page video title and then in my container here in the HTML I'm going to set just this bit to be dynamic. So current page video ID and then if I hit preview it loads in dummy data at least for the text it doesn't have any dummy data for the video ID and that's because by hitting preview it doesn't know which one of my videos to show so Bubble just has a guess and the way of displaying your pages layout and content but without actually inserting a like a line from your database of video into the page and so you get this sample text.

Testing the Dynamic Video Page

In order to test the page you just built I'm on another page and I've just created the button and a different way to go about this if you were to build out this whole part on your website you probably set up a repeating group and you'd have to repeat and group list all of the videos in your database and then by clicking on those you'd go over to the video page but for now I've only got one video in there so I've got this button and I'm going to navigate to the video page and I now need to decide which bit of data to send across. My database has only got one video in it but Bubble will still treats it like a list because I could have more than one video in there so I'm going to do a search for videos video and this would bring up all the videos in my database but I only have one and I have to put a single item in here and because I only have one I know it's going to be the first item.

Demonstrating Dynamic Content

Now let's hit preview and then view video there you go so now this page has got two elements that are dynamic we have got the title being pulled across and we have the eye of the tiger. To further demonstrate this if I go back just another random YouTube video let's change our data so I'm changing the video ID and I'm changing the title and hit save and then there we go it's loading in the only video in my database but it is making this page which I've called embedding videos it's making it dynamic and it allows you to have greater control over how you embed videos in your page.