WordPress Gutenberg(グーテンベルク)ブロックエディタの使い方:動画を埋め込む方法
[PR]プロモーションが含まれています

WordPress Gutenberg(グーテンベルク)ブロックエディタの使い方:動画を埋め込む方法

Gutenberg(グーテンベルク)のブロックエディタで、動画を埋め込む方法です。YoutubeやVimeoなどの動画共有サイトから選んだり、Wordpressのメディアライブラリから直接選択することができます。

例)動画共有サイトの動画を埋め込む(推奨)

埋め込みブロックの「埋め込み」を選択

埋め込みたい動画のURLを動作サイトからコピーします。Youtubeの場合、動画画面の右下(スマホの場合は、右下の3点メニュー内)にある「共有」からURLをコピーしておきます。

動画を埋め込みたい場所で埋め込みブロックを選択して、赤枠の「埋め込み」を選択します(例:青枠のように使用する動画サービスの専用ブロックが表示されていればそちらを選択しても問題ありません)

先ほどコピーしたURLを貼り付けて埋め込みボタンをクリックします。

ページを確認すると埋め込まれた動画が表示されます。

例)メディアライブラリから直接動画ファイルを埋め込む(非推奨)

WordPressでは動画ファイル(.mp4、.m4v、.mov、.wmv、.avi、.mpg、.ogv、.3gp、.3g2)をアップロードできます。ただし、動画ファイルはサーバーの負荷が大きいため、ページの表示速度が低下する可能性があるのであまりおすすめしません。

メディアブロックの「動画」を選択

アップロードまたはメディアライブラリから動画ファイルを選択します。

ページを確認すると埋め込まれた動画が表示されます。

preload=”none”を設定してサーバー負荷を軽減

どうしてもメディアライブラリや自社サーバから直接動画を読み込みたい場合は、videoタグ内にpreload=”none” を設定することで、ユーザーが実際に再生するまで動画は一切ダウンロードされないため、不必要なデータ消費を抑えることができます。

動画ブロックを「HTMLとして編集」にして、videoタグにpreload=”none” を設定します。

<figure class="wp-block-video"><video controls preload="none" src="https://wp-notes.com/wp-content/uploads/sample.mp4"></video></figure>

モバイル環境や低速なインターネット接続の場合、ページ読み込みの高速化やサーバー負荷の軽減、帯域幅とデータ消費の節約などを考慮することが非常に重要です。できるだけ軽量化したページにすることで離脱を防ぐことができます。