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.
Did you ever figure this out? Seems odd that video height wouldn’t adjust proportionally to width.
No, I still haven’t figured out how to maintain video proportions with the responsive engine.
I have the same issue. Any solutions yet?
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.
Same Q, this is maddening.
Same problem. Would love to see a solution.
Me too
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:
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
</style>
<style>
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/YrDyMWIHDSY"></iframe>
</div>
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!
Any solution yet? I am also struggling with the same.
Thanks for sharing this. I tested on a video. Seems to be working.
For a non-coder, you’ve done amazingly! thanks so much