How can I get css max-height to work correctly?

Question

and help: :-)

Im not really a coder, but trying to set up a web page that has an iframe with an embedded canvas that is responsive. I'd like the animation to scale up to a certain point, but afterwards remain fixed. I seem to have achieved that, but am having problems with the iframe which keeps on getting bigger. The code im using is a padding trick for getting iframes to scale proportionally to it's content. But max-height doesn't seem to have any affect on it. The test page is here:

https://iamsteve.co.uk/test1/

The black is the iframe background, the blue is the wrapper background, which is what seems to be causing me such a headache? How can i get the blue to stop expanding?

<div class="wrapper" style="position:relative; overflow: hidden; padding-top: 44.5%;">
    
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: 0;" src="https://iamsteve.co.uk/houseofholmes/test.html" gesture="media"  allow="encrypted-media" allowfullscreen>
</iframe>
</div>

<style>
    .wrapper {
        background-color: blue;
        max-height: 400px;
    }
    iframe {
        max-height: 400px;
        background-color:black;
    }
</style>

Any help greatly appreciated. many thanks. Steve

Answer 1

I tried to look on your code. try this if I understand you right.Seems like adjusting your padding-top which you use to get the right area you want on iframe just needed to be less %. You also can add a pretend div on top of the iframe and adjust height and width of it.

 .wrapper { padding-top:30%; }

 <div class="wrapper" style="position:relative; overflow: hidden; padding-top: 30%;">