Forum Academy Marketplace Showcase Pricing Features

Responsive video height (w/new responsive engine)

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.

1 Like

Did you ever figure this out? Seems odd that video height wouldn’t adjust proportionally to width.

1 Like

No, I still haven’t figured out how to maintain video proportions with the responsive engine.

1 Like

I have the same issue. Any solutions yet?

2 Likes

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.

1 Like

Same Q, this is maddening.

Same problem. Would love to see a solution.

1 Like

Me too

1 Like

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!

2 Likes

Any solution yet? I am also struggling with the same.

Thanks for sharing this. I tested on a video. Seems to be working.

1 Like

For a non-coder, you’ve done amazingly! thanks so much

1 Like