アニメーションGIFはもう不要？動画ブロックの設定方法を紹介

ブログ記事で簡易的な動画を見せて説明したい場合に、下記のようなアニメーションGIFを使用することもあるかと思います。

ただ、アニメーションGIFは適切に処理すればデータも軽くて済むのですが、意外とファイルサイズが大きくなりがちで、多用するとページの表示時間にも大きく影響を与えてしまいます。

そのため、重いアニメーションGIFよりもMP4などの動画で表示する方が効果的な場合もあるので、ここではブロックエディタで動画を設定する方法について紹介していきます。

ここで解説する内容は、WordPressバージョン5.7.2時点での情報を基にしております。

ブロックエディタから動画を埋め込む方法

ブロックエディタ内で動画を挿入したい場所で「動画」を追加します。

「データをアップロードする」「メディアライブラリから選択する」「動画のURLを指定する」いずれかの方法で動画を追加します。

現在のところ、*.ogm, *.wmv, *.mpg, *.webm, *.ogv, *.mov, *.asx, *.mpeg, *.mp4, *.m4v, *.avi の拡張子を持ったファイルであればアップロード可能です。

ひとまずはこれだけで動画を埋め込むことができます。

このように動画が表示されます

ここからは、動画ブロック（設定パネル）のオプションについて解説していきます。

使用テーマによっては、動画周囲に枠や影などの装飾スタイルを設定できる場合があります。

ストーク19（テーマバージョン2.3.6時点）では「デフォルト」「影（小）」「影（大）」「枠線」の中から選択できます。

動画に関する様々なオプションを設定できます。それぞれの機能について説明していきます。

オンに設定するとページを表示すると動画が自動再生されます。

ブラウザの設定等にもよると思いますが、スマホブラウザでは無効の場合もあります。

オンに設定すると動画が繰り返し再生されます。

オンに設定すると動画が消音モードになります。（音量ボタンで調整可能）

オンに設定すると動画の下部に各種コントロールツールが表示されます。

オンに設定すると（スマホブラウザでも）動画が同じページ内で再生されます。

ブラウザの設定等にもよると思いますが、オフに設定している場合でも、ほとんどのPCブラウザではインラインで再生されます。

ページが表示されたときに動画に関する情報をどこまで読み込みかを設定できます。「自動」「メタデータ」「なし」の3つから選択できます。

自動	ページが表示された時点で動画のデータが全て読み込まれます。
メタデータ	ページが表示された時点では動画のメタデータ（再生時間などの情報）のみ読み込まれます。
なし	ページが表示された時点では何も読み込まれません。