🎬
埋め込んだYoutubeの横幅の最大値を設定する
このScrapから。
やりたいこと
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;
}
}
Discussion