HTML element responsiveness with video embeds

[robin.wyatt]

Hi folks,

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!

[robin.wyatt]

Hi again. I am still looking for help with this, can anyone pitch in?

[ankur1]

Check out this code snippet- @robin.wyatt

Build Hub for Bubble Visual Developers

Thanks to @rico.trevisan

[robin.wyatt]

Hi @ankur1 ,

Many thanks for your reply, and also thanks to @rico.trevisan! Please could you let me know whether this (left) looks right to you?

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.

Warm wishes,

Robin

[rico.trevisan]

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.

[robin.wyatt]

Hi @rico.trevisan,

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:

Here are screenshots of the various tabs:

Don’t worry about the fact that the dynamic data text now says ‘Video embed code’ rather than ‘Video URL’, I renamed it in the database.

Warm wishes,

Robin

[josh24]

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: https://www.labnol.org/code/19797-regex-youtube-id

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

I post daily about no-code and Bubble on Twitter

[robin.wyatt]

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):

.video-container { overflow: hidden; position: relative; width:100%; } .video-container::after { padding-top: 56.25%; display: block; content: ''; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

[johndurso]

Why can’t I see any answers from this thread? Seems to be exactly what I need but all the text is invisible!