埋め込んだYoutubeの横幅の最大値を設定する

このScrapから。

やりたいこと

https://github.com/zenn-dev/zenn-editor/blob/main/packages/zenn-content-css/src/_embed.scss#L1-L27

Zennのパブリックリポジトリ内のCSSを見ながらYoutubeの埋め込みのCSSを書いている。
しかしwidthは親要素に合わせて100%になってしまうので、明示的に最大幅を設定したい。

結果

まずは実装した結果を確認する。
白色の部分は900pxに設定し、Youtubeの埋め込みの最大幅は600pxに設定している。

画面幅が大きくても白色の部分の2/3（=600px）くらいになっていることがわかる。

画面幅が小さい場合は白色の部分いっぱいに表示されている。

実装

Youtubeの埋め込みに関する最小限の実装は以下。

span.embed-block {
  max-width: 600px; // 最大幅
  display: block;
}

.embed-youtube {
  position: relative;
  padding-bottom: min(calc(58%), calc(600px / 16px * 9px + 16px)); // 16pxは適当な値
  iframe {
    position: absolute;
    width: 100%;
    height: auto;
    border: none;
    aspect-ratio: 16 / 9;
  }
}