I want my embedded video to be a certain fraction of the height of the screen, but keep it’s original aspect ratio for width.

Currently I have style=”height: 40vh” and it appears the right height, but the video is shrunk into a square instead of 16:9 and no width stylings or classes I add seem to affect it. It is inside a table with nowrap and the content above it is wider than the video currently is. Here is the current code:

    <div class="container">
        <iframe class="responsive-iframe"  style="height: 40vh" src="https://www.youtube.com/embed/xxxxxxxxxxx?si=7oKwlZKrsgesogEJ&controls=0&autoplay=1&mute=1&loop=1&hd=1" title="Aquarium Sim" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>

and css:

    .container {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    }
    
    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }