youtube埋め込みしてスマホサイズにすると上下に黒い背景が出るのはかっこ悪い！
どのサイズでもyoutube画面の縦横比のまま表示できるようにするCSSなんだっけ？といつも調べるからメモしとく。
aspect-ratioで縦横比調整
aspect-ratioはアスペクト比を指定するcss。
aspect-ratioは古いブラウザには対応していない場合もあるけど、最新に対応していればいいという場合は便利。
※アスペクト比とは縦横の比率のこと
HTML
<div class="movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/iES96tY4svQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>SCSS
.movie{
max-width: 560px;
width: 100%;
margin-left: auto;
margin-right: auto;
aspect-ratio: 16 / 9;
iframe{
width: 100%;
height: 100%;
}
}PCではiframeに記載しているwidth560pxに合わせてセンター表示する仕様にしている。
もしPCでも横幅いっぱいがよかったら、max-width: 560px;とmarginたちを消す。
padding-topで調整することもできるよ
padding-topを使ってアスペクト比を指定する方法。
古いバージョンにも対応という場合はこっちの記述のほうが良いかも。
SCSS
.movie{
position: relative;
max-width: 560px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 56.25%;
iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
}padding-top: 56.25%;は、16:9の9(縦幅)÷16(横幅)×100で％を割り出した値。
参考にさせてもらったサイト
YouTube動画の埋め込みをレスポンシブ対応する方法（WordPressのGutenbergでの対応も！）
親切丁寧に書かれていてとてもわかり易かったです。ありがとうございます。
