[WordPress] Gutenberg YouTube埋め込みブロックのアスペクト比を変更する
Gutenbergの埋め込みブロックがなかなか便利なのでYouTubeの動画を紹介する時に重宝していますが、比較的新しめの動画と少し古めの動画ではアスペクト比が違う場合があるんですよね。
動画を横に並べて紹介するわけでも無いので別に違ってても問題は無いですが、変なところで几帳面な私としては出来れば統一感を持たせる為に同じアスペクト比で埋め込みたいと思うわけでして、当エントリーではそんな時の為の小ネタを紹介します。
埋め込んだ動画のアスペクト比を変更する
これから紹介するのはあくまでもGutenbergを利用した方法なので、クラシックエディタを利用している方はごめんなさい。
私は主にアスペクト比が4:3の動画を16:9に変更する事が多いですが、ここでは変更方法を紹介するだけなので16:9の動画をサンプルとしています。
まずはYouTubeの埋め込みブロックに動画のURLをコピペして埋め込みを押します。URLは動画のページそのままでも短縮URLでもいけます。
動画が表示されたら高度な設定を開きます。
するとこんな感じになっているかと思いますが、最初のクラスの数字の部分 16-9 がこの動画のアスペクト比を表しています。
wp-embed-aspect-16-9 wp-has-aspect-ratioそこで例えばこの動画を4:3にしたい場合はこれを
wp-embed-aspect-16-9こうしてやればOKです。
wp-embed-aspect-4-3
単純に動画が引き伸ばされるような事はありませんが、変更前と変更後のアスペクト比によっては動画がクロッピングされて上下か左右が切れたり、プレイヤー内に余白が出来る場合があります。なので動画そのものではなく動画を表示する枠（プレイヤー）のアスペクト比を変更すると思った方がいいかもしれません。
更に横長にしたい場合は
wp-embed-aspect-21-9
こんなのもありかと。
ブロックライブラリ用のCSSを利用
このアスペクト比はどんな値でも自由に設定出来るわけではなく、ブロックライブラリ用のCSSを利用しているだけなので、追加したいサイズがあればそのCSSを応用して新しいクラスを作成すれば何とかなるんじゃないかなと思います、たぶん。
デフォルトで設定可能なアスペクト比はこんな感じ。
- 1:1
- 1:2
- 4:3
- 16:9
- 18:9
- 21:9
中には正直使い所のよくわからないアスペクト比もありますが、スマホで撮影した動画なんかは縦長もありかもしれませんね。とか言ってYouTubeで縦長の動画って見た事無いですけど。
あとは9:6とか9:16という数字も見かけたので試してみましたが、実際その比率にならなかったので気になる方はブロックエディタのCSSを確認してみて下さい。
アスペクト比を変更した場合の注意事項
この方法で埋め込みブロックのアスペクト比を変更した場合、その投稿を再び編集で開くと元の動画のアスペクト比に戻ってしまうという難点があります。
しかもわかりにくい事に変更したクラスセレクタを上書きするんじゃなくて、その最後尾に追加してしまうという謎仕様。
例えば4:3から16:9に変更していた場合はこうなります。
wp-embed-aspect-16-9 wp-has-aspect-ratio wp-embed-aspect-4-3パっと見では気が付かないと思いますが、追加CSSにカーソルを置いて右端まで移動させると…
という事でこの点だけご注意下さい。
保存せずに閉じる場合は気にする必要はありませんが、どこか編集して保存する場合はこの余分についたクラスを削除しないと本来のアスペクト比に戻ってしまうので、この部分も削除してから保存するようにして下さいね？
埋め込みブロックのアスペクト比を変更する方法でした
私がYouTubeの動画を埋め込む時は全てアスペクト比が16:9になるよう設定しています。頻繁に更新する投稿や固定ページだと編集する度に元のアスペクト比に戻ってしまうのが煩わしいですが、同じページにサイズがバラバラの動画を貼るのは見映えが悪いので統一したいという時に使える小技だと思いますのでぜひお試しを。