iframeとcssのみで縦横比を維持させる（wrapper要素不要）

前提

YouTubeの埋め込みなどで、ウィンドウサイズによって縦横比を固定したままiframeを可変できるようにしたいのはよくある需要です。
それを実現させるためにiframeをdivで囲んで可変対応させる方法が有名ですが
クライアント案件などにおいては 「WordPressなどでクライアント担当者が更新するが、相手に生のHTMLを書かせられない（ただYouTubeの埋め込みコードをコピペするだけにさせたい）」 というところで、中々対応するのが難しい状況があります。

結論

font-size と em を組み合わせて高さを確保する!

iframe {
  display: block;
  max-width: 100%;

  // 【ポイント１】
  // iframeを常に親要素の横幅いっっぱいにしたい場合は width: 100%; を指定
  // 基本は iframe の width と height の大きさで
  // ウィンドウサイズがそれよりも下回った場合にだけ可変させたい場合は width をトル
  width: 100%;

  // 【ポイント２】
  // 仮にスマフォデザインが左右に10vwずつマージンを確保してるものとする [100vw - (10vw * 2)]
  // 「親要素横幅いっぱいにしたいから 100%だ」 は間違いです。
  // font-sizeの100%は「親要素のfont-sizeと同じ」の意味だからです。
  // そのため必ずvwやpx、remで指定しましょう。
  // レスポンシブデザインでブレークポイントによって左右のマージンが変わる場合は
  // font-sizeのみを各メディアクエリ内で上書きしてください。
  font-size: 80vw;

  // 【ポイント3】
  // 1em は font-size と同じになるので、 16:9の比率にしたい場合 [1em:X = 16:9] となり
  // X = 0.5625em になる
  max-height: 0.5625em;
}

従来の（divで囲む）方法

一応こちらも記載しておきます。
css自体は上記のようにデザインに左右されないので大変シンプルですね。

.wrapper {
  position: relative;
  padding-top: 56.25%;

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