Aspect ratio responsive Image

HTML

<div class="test-div">
    <div class="test-div-inner">
       <iframe class="test-image" src="https://ava.casperlibero.edu.br/pluginfile.php/27157/mod_resource/content/6/curso_livre_teste.html" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

CSS

.test-div {
    border:1px solid #CCC;
    width:100%;
}
.test-div-inner {
    padding-bottom:56.25%; /* 1,77 Ratio */
    background:#EEE;
    height:0;
    position:relative;
}
.test-image {
    width:100%;
    height:100%;
    display:block;
}