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!