Padding bottom with max height

Question

Here's the HTML:

<div class="container">
   <div class="wrapper">
      <iframe src="...."></iframe>
   </div>
</div>

The wrapper div has CSS: position: relative; width: 100%; height: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;

The iframe has CSS:

position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;

The container has CSS:

position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
max-width: 1280px;
max-height: 720px;

I'm trying to protect the aspect ratio 16:9 of the iframe as the window resizes and also maintain a maximum height for it of 100% - 67px calc(100% - 67px). How can I do the two at the same time?

Answer 1

I had the same issue. Ended up making another wrapper for the wrapper to get the effect of both.

The inner wrapper ensures that the aspect ratio is retained as padding-bottoms' value is scaled from width. The iframe fills it's container, and the outer wrapper provides the max-width so that it stops expanding after 865px.

.video-wrapper-wrapper {
    max-width: 865px;
    margin: auto;

    .video-wrapper {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 82%;

        iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
}

Answer 2

Instead of using padding to set the height, set the height to the viewport width:

height: 56.25vw; /* 16:9 */

You can then set a max-height to whatever you like.

Answer 3

The solution is to wrap the entire thing in an element with max-height: ___; overflow: hidden.