[wordpress]動画のサイズを変更する

サイズ 100x100 程度の小さな動画を GIF 動画のように表示したいのですが、Gutenberg エディタでは画像サイズが自動的に記事幅になってしまい、小さな動画も伸び伸びで表示されてしまいます。

また、Gutenberg エディタだと動画のサイズを設定することができないんですよね……。

こうなってしまう

これを解消するために css を使うことにします。

追加 css クラス

動画の 追加 css クラスを設定します。ここでは video20 という名前にします。

css を設定する

テーマの追加 css が楽に確認できますが、サイトでいつも css を設定している場所で構いません。
デフォルトで引き延ばされる画像サイズを 20% まで縮小します。

.video20
{
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: 20%;
}

ポイントとしては、縮小する必要がなければ追加 css を書かなければいいという点です。
video50 を用意して 50% のサイズ表示できるようにするなど、サイズにバリエーションを持たせる事もできます。

なお、この記事のように GIF 動画っぽく動画を見せたい場合、こちらの記事をご覧ください。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA