I’m struggling to make video embeds responsive within an HTML element. I have set my app up such that users can grab the embed code provided by YouTube or Vimeo and enter it on a form. I am then trying to call on that code using an HTML element as follows to display the video to other users:
My problem is that YouTube gives dimensions in its embed code, so that is breaking the responsiveness. I search the forum here, and the closest I got to a fix was this post, which led me here. This explains the code I’ve added in my screenshot above. Although it worked the very first time I checked it, it has failed every time since (not sure why, as I didn’t change anything!).
Does anyone know a solution to this? Thanks in advance!
For some reason, YouTube doesn’t see to want to let me do it. This is the video being called via dynamic data. When I uncheck ‘Display as an iFrame’, the result is that nothing is displayed at all, not even a blank space.
Check the visibility of the groups? Otherwise, share the settings - all of the tabs - of the html item plus the group that contains it. I think that the containing group needs to have a minimum height of 100 or 200px.
Thanks for weighing in here. I checked the visibility and everything seems fine. I also made sure the minimum height of both the HTML element and the containing group is set to 200 px. No joy, but interesting that today it’s saying that my app (not YouTube this time) is refusing to connect:
I do something similar on a project and I just use the standard video element by Bubble. It’s responsive and works well. It avoid all the custom CSS you inevitably need to use when using the HTML element.
To handle user input I just get the user to input a link to the video rather than pasting in the embed code - which I think is slightly easier for the average user to understand. I then use REGEX to extract just the ID of the video - but be careful with this step as there’s numerous differently formatted URLs for Youtube. This might help: RegEx - Extract Video ID from YouTube URLs - Digital Inspiration
I’m guessing you could find something similar for Vimeo. At least their URL structure is a bit more straight forward!
The only challenge is you can’t dynamically switch the video element between YouTube & Vimeo. So you’d need to put two on the page and just show the right one at the right time. So perhaps think about how you manage this in your database so you can distinguish them apart.
Josh @ Support Dept
Helping no-code founders get unstuck fast save hours, & ship faster with an expert on-demand
Hi. I took a break from this for a while and revisited it today. Thanks to @ankur1 for providing the solution! I think something has changed at Bubble’s end during the last few weeks. When I changed the dynamic data being pulled from my database such that the html element was being provided with a URL rather than an embed code, it worked. I’m pretty sure I did this previously and it didn’t work. In any case, this now works. For anyone who wants to use the same HTML as I am, here it is (be sure to replace the bolded part with whatever makes sense for you):
save hours, & ship faster with an expert 
on-demand