iframeやvideo要素を縦横比を保ったまま縦にも横にもcssのみでレスポンシヴ

横幅に合わせて縦横比を保ってレスポンシヴはよく見かけるのですが、縦幅に対してもレスポンシヴ(vhを使いたい時など)を見つけられなかったので備忘。

サンプルの仕様

• iframeの縦横比は[16:9]にて
• 幅はWindow幅に対して[100%]
• 高さはWindow高さに対して[80vh]

※[ ] … 必要な値に適宜置き換えて使えると思います。

html

<div class="responsive-vertical">
  <div class="responsive-horizontal">
    <iframe width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

css

.responsive-vertical{
  max-width: 100%;
  width: calc(80vh * 16 / 9);
  max-height: 80vh;
  margin: 0 auto;
}
.responsive-horizontal{
  position: relative;
  padding-top: calc(9 / 16 * 100%); /*56.25%でもOK。わかりやすいように式で出してます。*/
}
.responsive-horizontal iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CodePen

もっと簡単な方法ご存知の方いらっしゃいましたら教えてくださいませ〜