Responsive iframe with max width and height

Question

I have a fixed height container containing both images and iframes. To make the images responsive and preventing both vertical and horizontal overflow I can just set the following CSS:

img {
    max-width: 100%;
    max-height: 100%;
}

This ensures that a portrait image would not overflow vertically and a landscape image would not overflow horizontally.

For iframes, I'm using the "padding-ratio" technique, setting the padding of the wrapper element to the aspect ratio of the iframe (e.g. 56.25% for a 16:9 video):

.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

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

While this means that the iframe scales with the width of the viewport it does not work the same if I change the height of the viewport. Essentially I'd like the iframe to mimic how the images work.

Answer 1

For my uses (embedding videos from Vimeo on a responsive site), this works great in the browsers I've tested in:

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

It doesn't require image placeholders, so it's a lot simpler.

Answer 2

This code did the trick for me:

<div class="video-container"><iframe.......></iframe></div>

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Source: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed