Youtubeの埋め込みタグを編集せずにレスポンシブ化

はじめに

「YouTube レスポンシブ」などでググるとdivとかでiframeを囲ってiframeにposition:absolute;を掛けるやり方が出てくる。
↓
「埋め込み利用側にタグを編集する手間を掛けさせずに同機能を実現したいなぁ」

1

てっとりばやくレスポンシブ化というだけであればheightにvwを指定するだけで達成できました。
動画のアス比を16:9と仮定して、「9 / 16 * 100 = 56.25vw」をheightに入れます。

iframe {
    width: 100%;
    height: 56.25vw;
}

Demo

2

コンテンツの左右に余白がある場合、heightにも余白分の補正を入れる必要があります。

.container {
  width: 90vw;
  margin: auto;
}

iframe {
  width: 100%;
  height: calc(56.25vw * .9);
}

container vw / viewport = n
90vw / 100vw = 0.9

56.25% * 0.9 = height

Demo

3

全てのiframeにCSSが適用されてしまっては困るので特定のiframe（今回はYouTube埋め込み）だけに適用するようにしたいです。
iframeにclassを追加してしまうのが早いですが、それでは埋め込みタグ編集不要という趣旨から外れてしまうのでドメインをセレクタで引っ掛ける方法にしてみました。

iframe[src*='youtube.com'],
iframe[src*='youtube-nocookie.com'],
iframe[src*='youtu.be'] {
  width: 100%;
  height: calc(56.25vw * .9);
}

埋め込みタグのドメインは他にもあるかもしれません。（調査してないです）