What is the proper way to make a YT video with responsive width and height?
The width is easy enough, but then the height should be a percentage of the width. How can I define the width at 0.5625% of the height? It seems like there should be an aspect ratio control on the video element.
My (temporary?) solution was to create two nearly identical video player elements that show/hide based on the page width. I just set the height of the video so that it would look normal at each page size. Not ideal, but waiting on an answer to this responsive issue was holding back my site.
So I haven’t really tested this solution much, but it appears to be working at first glance. I would LOVE if someone who knows more about HTML can analyze this and tell me about any potential problems. I’m basically copy/pasting the code from this site:
The only change was that I added < style> … < /style> tags before and after each CSS style thingy (is it obvious that I don’t know real coding?), so the final entry into the HTML element on Bubble is this:
My main issue is that I stored my YouTube videos as full links with the “watch” part of the URL, but this HTML solution requires the embed link. In order to apply it across my site, I’ll need to update my database to change all my links in some way. I would definitely love to get more feedback on this solution before I go through all that trouble. Please share your experience if you try it too!
I’ve got to say I’m no coder either, but for what it is worth here are my experiences…
In Bubble Version 20 I managed to make my Video Player contained within an iframe in an HTML element responsive by adding Dynamic Data into the iFrame width and height settings. It looked something like this:
The move to Bubble v21 seemed to break this. I reported it to Bubble via the helpdesk and they said that they had implemented a fix to v21 that should fix iFrames to be responsive?? And yet it was broken for me!
I fiddled around with it today and managed to get it working (with the help of this thread). The data in the Appearance section of the HTML element now reads:
One quirk was that I had to first delete the HTML element and re-add it. When I did this, the new HTML element had additional controls! Significantly, the “Fit height to content” checkbox was present on the Layout Tab (when it was not there before?!). I now have this selected.
I also have found that to get it working responsively I need to DESELECT the “Display as an iFrame” checkbox.