YouTube動画のサイズをスマホに合わせる

私は去年までガラケーを使っていたので、スマホで自分のブログを見たことがなかった。

スマホを入手後も、いろいろ忙しかったので、記事を開いて細かくチェックするということもやっていなかった。

そして、昨日、動画の埋め込みプレーヤーがスマホの画面からはみ出していることに初めて気づいた😓

この問題について、解説してくれているサイトはいくつかあったが、私のブログ（ココログ）ではうまくいかないものもあったので、とりあえず、ココログでうまくいった方法を記録しておく。

まず、［デザイン］＞［カスタムCSSを編集］で［カスタムCSS］に以下をコピペ。

.responsive {

width: 100%;

aspect-ratio: 16/9;

}

そして、動画を埋め込む際には、YouTubeからコピペしたコードを次のように変更（ハイライト部分）

<div class="responsive"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/iHK1II_Vju0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>

しかし、過去記事を全部編集するとなると、大仕事。

ぼちぼち修正するしかないね。