I’m having trouble with a YouTube video embedded on my site. The video width adjusts fine but I can’t get the height to scale automatically based on the video’s aspect ratio.
For example, if my video container is 800px wide and the video has a 16:9 ratio, the height should calculate to 450px automatically. I tried using viewport units like vw and vh but they don’t work properly with iframes.
The width scales correctly but the height stays empty. Is there a CSS solution or do I need JavaScript to calculate the proper height? Any help would be great!
honestly the easiest fix is just setting a fixed height that matches your aspect ratio. if your container is 800px wide then just do height="450px" for 16:9 ratio. not the most elegant but it works and avoids all the css wrapper complications mentioned above.
The empty height attribute in your iframe is definitely the issue here. You need to use the aspect ratio container technique which works reliably across browsers. Create a wrapper div with position: relative and set its padding-bottom to the aspect ratio percentage. For 16:9 videos, that’s 56.25% (9/16 * 100). Then position your iframe absolutely within that container with 100% width and height. This method forces the container to maintain the correct proportions while the iframe fills it completely. I’ve used this approach on several client sites and it handles window resizing perfectly without any JavaScript calculations needed.
Had this frustrating issue when redesigning our company blog. The viewport units approach you mentioned definitely won’t work since iframes don’t inherit viewport calculations properly. What solved it for me was using CSS custom properties to handle the math dynamically. You can set a CSS variable for your desired width percentage, then use calc() to determine the height based on the aspect ratio. Something like --video-width: 96vw and then height: calc(var(--video-width) * 0.5625) for 16:9 ratio. This keeps everything in CSS without needing wrapper divs and maintains responsiveness across different screen sizes. The calculation handles the aspect ratio automatically as the viewport changes, which is cleaner than hardcoded pixel values.
Your iframe setup is missing the height value which explains why it’s not displaying properly. Instead of leaving height empty, try using a percentage-based calculation directly in the style attribute. You can calculate the height as a percentage of the width using the aspect ratio formula. For a 16:9 video, multiply your width by 56.25% (which is 9/16). So if you’re using 96% width, your height should be approximately 54% of the viewport width. This avoids the complexity of wrapper containers while keeping your markup clean. The key is ensuring both dimensions scale proportionally by tying the height calculation to a viewport-relative unit that corresponds to your width setting.
I ran into this exact same problem last year when building a responsive site. The solution that worked best for me was using CSS aspect-ratio property combined with a container approach. Set up a div wrapper around your iframe and apply aspect-ratio: 16 / 9 to it, then make the iframe fill the container with width: 100%; height: 100%. The container will maintain the proper ratio while the iframe scales accordingly. If you need to support older browsers, you can fall back to the padding-bottom percentage method as a backup. This approach eliminates the need for JavaScript calculations and handles different video ratios cleanly if you ever embed content with different aspect ratios.