<img>タグなどは元来の縦横比を保持するために

img{
    width:100%;
    height:auto;
}

このように、heightにauto値を指定することによって、widthの値に対応し、縦横比を保持しながら、heightを自動調整するように設定できる。

しかし、<iframe>タグはwidthとheightにauto値を指定することができない(指定したら既定値に設定される)。
そのため、widthとheightを対応させられず、簡単に縦横比を保持することができない。

解決策

heightの値が0の\

タグで\