WordPressビデオブロックの使用方法

WordPress Video Blockを使用すると、ページや投稿にビデオを簡単にアップロードおよび追加できます。 サイズと機能を制御するための多くのオプションがあります。 このブロックでビデオを追加すると、コンテンツがよりプロフェッショナルで望ましいものになります。 幸い、ビデオブロックは使いやすいです。

この記事では、ビデオブロックについて説明します。 また、その設定とオプション、使用方法のヒントとベストプラクティス、よくある質問についても説明します。

投稿またはページにビデオブロックを追加する方法

ビデオブロックをコンテンツに追加するには、まず、ブロックを表示する場所にカーソルを置き、インサーターツールを選択します。 次に、検索ボックスが開き、ブロックを検索したり、スクロールしてオプションを確認したりできます。 ビデオを検索し、結果に表示されたら選択します。

必要に応じて、ブロックを配置する場所に/ videoと入力し、Enterキーを押すか、オプションから選択します。

ビデオブロックはコンテンツエリア内に配置されます。 メディアの挿入は、イメージブロックと同じように機能します。 ビデオをアップロードするか、ライブラリからビデオを選択するか、表示するビデオのURLを挿入します。 URLがYouTubeなどのソースからのものである場合、ブロックはそのタイプのブロックに変換されます。 動画をアップロードするまで、オプションは最小限です。

ビデオプレーヤーには、再生/一時停止ボタン、プログレスバー、オーディオ、フルスクリーン、ダウンロードボタン、ピクチャーインピクチャーボタンなど、すべての基本的な再生オプションが含まれています。 ピクチャーインピクチャーは、ビデオを右下隅に配置して、ユーザーがWebサイトをスクロールしているときに再生できるようにします。 ビデオの下にキャプションを付けることができます。

ビデオブロックの設定とオプション

オプションと設定には、ツールバーとサイドバーが含まれます。 動画をアップロードするまで、これらすべての設定は表示されません。

ビデオブロックツールバー

ビデオブロック内の任意の場所をクリックして、ツールを表示します。 このブロックの下にブロック領域を追加するまで、一部のツールが表示されない場合があります。 それぞれの設定を詳しく見ていきましょう。

ビデオ変更ブロックまたはスタイル

ビデオ再生アイコンを選択すると、ブロックを他のタイプのブロックに変換できるドロップダウンボックスが開きます。 この例はCoverを示しています。

グループ–これにより、ブロックがグループに追加されるため、単一のブロックとして調整できます。

列–これによりブロックが列内に配置されます。

メディアとテキスト–これにより、メディアの横にテキストが追加され、2つの列が作成されます。

表紙–これはビデオの上にキャプションを配置します。 キャプションを段落ブロックから他のタイプのテキストブロックまたはボタンに変更できます。

ファイル–これにより、ビデオがキャプション付きのボタンに変更され、ユーザーはWebサイトからビデオを再生する代わりにビデオをダウンロードできるようになります。

ビデオブロックドラッグツール

マウスでドラッグツールをつかんで、コンテンツ内の任意の場所に移動します。 ブロックをドラッグすると、ブロックがドロップされる場所を示す青い線が表示されます。

その後、ビデオブロックは新しい場所に配置されます。

ビデオブロック移動

上下の矢印を使用して、ビデオブロックを1つのコンテンツセクションだけ移動します。

ビデオブロック変更の調整

配置オプションには、左、中央、右、幅、および全幅が含まれます。 左右の配置により、次のブロックのテキストがビデオの周りに折り返されます。 この例を正しく配置するように設定しました。

これは広い幅です。 画面の大部分を占めます。

ビデオブロックテキストトラック

テキストトラックには、ビデオの再生中に字幕とキャプションが表示されます。 これらは、WebVTT（Web Video Text Tracks）.vttファイルとしてフォーマットされています。 ファイルはメディアライブラリからロードされます。

.vttファイルをアップロードすると、トラックを編集するためのオプションが表示されます。 ラベルを追加し、言語を選択して、トラックの種類を選択します。

ラベルは、ユーザーが使用可能なトラックを見たときに表示されるテキストトラックのタイトルです。

ソース言語は、テキストトラックの言語です。

種類とは、表示されるトラックの種類を指します。 オプションは次のとおりです。

• 字幕–ダイアログの翻訳。
• キャプション–ダイアログ、効果音、音楽などの文字起こし。
• 説明–何が起こっているかを説明するテキスト。
• 章–ナビゲーション用の章のタイトル。
• メタデータ–JavaScriptが使用するデータ。

次に、ユーザーが選択できるプレーヤーのオプションにキャプションが追加されます。

ビデオブロックの交換

これにより、ビデオを別のビデオに置き換えることができます。

ビデオブロックオプション

オプションには、設定の非表示、コピー、複製、前後の挿入、移動、HTMLとしての編集、再利用可能なブロックへの追加、グループ化、およびブロックの削除が含まれます。

オプションの機能は次のとおりです。

その他の設定を非表示–これにより、右側のサイドバーが非表示になり、気が散ることがなくなり、ワークスペースが拡張されます。

コピー–これにより、ビデオブロックがクリップボードにコピーされるため、コンテンツ内のどこにでも貼り付けることができます。

複製–これにより、元のブロックの下に複製が追加されます。

前に挿入–これにより、このブロックの上にブロック領域が追加されるため、別のブロックを配置できます。

後に挿入–これにより、このブロックの下に別のブロックを配置できる領域が追加されます。

移動先–これにより、ブロックを上下に移動できます。 矢印キーを使用してブロックの目的の場所に青い線を配置し、Enterキーを押すと移動します。

HTMLとして編集–これは、このブロックのみのHTMLを表示し、他のすべてのブロックは通常どおりにします。

再利用可能なブロックに追加–は、ブロックを再利用可能なブロックに追加して、他のページや投稿で再利用できるようにします。

グループ–これにより、ブロックがグループに追加されるため、すべてのブロックを1つのユニットとして調整できます。

ブロックの削除–これによりブロックが削除されます。

ビデオブロックキャプションオプション

キャプションには一連のオプションもあります。 キャプション領域内の任意の場所をクリックすると、太字、斜体、およびリンクのオプションを備えた小さなツールバーが開きます。 また、フォーマットのオプションも含まれています。 オプションは次のとおりです。

• インラインコード
• インライン画像
• キーボード入力
• 取り消し線
• 添字
• 上付き文字
• テキストの色

それぞれが強調表示したテキストに影響します。

ビデオブロック設定

ビデオブロックの設定には、ビデオと詳細が含まれます。 両方を見てみましょう。

ビデオ設定

ビデオ設定を使用すると、プレーヤーの動作を制御できます。 オプションは次のとおりです。

自動再生-ページがロードされ、自動的に動画が再生されます。

ループ–連続ループでビデオを再生します。

ミュート–オーディオをミュートします。

再生コントロール–プレーヤーコントロールを表示または非表示にします。 コントロールが非表示の場合、ユーザーはビデオを制御できなくなります。 自動再生を有効にする必要があります。

インライン再生–要素の再生領域内でビデオを再生します。

プリロード–ページがロードされたときにダウンロードされるビデオの量を設定します。 自動（ビデオ全体）、メタデータ（基本情報のみ）、またはなし（何も自動的にダウンロードされない）を選択します。

ポスター画像–ビデオの最初のフレームのスクリーンショットを注目の画像に置き換えることができます。 非アクティブ化しない限り、プレーヤーコントロールは引き続き表示されます。 上記の例で新しい画像を追加しました。

高度

詳細なビデオ設定には、HTMLアンカーと追加のCSSクラスが含まれます。

HTMLアンカー–この特定のブロックのカスタムURLとして使用するテキストを指定できます。

追加のCSSクラス–このブロックに使用するCSSクラスを追加するためのフィールドを提供します。

ビデオブロックを効果的に使用するためのヒントとベストプラクティス

YouTubeやVimeoなどのソースからのビデオを埋め込む場合は、ビデオブロックではなくそれらのブロックを使用してください。

ビデオを圧縮し、サイズと読み込み時間を短縮します。

オンラインキャプションジェネレーターまたは同様のアプリを使用して.vttトラックを作成します。

ページ速度を上げる場合は、プリロードを[なし]に設定します。 自動的にダウンロードされる量は、ページの読み込み速度に影響を与えます。

左右の幅のオプションを使用して、ビデオの周囲にテキストを配置し、視覚的に面白く見せます。 ワイドオプションとフル幅オプションを使用して、ビデオを強調します。

動画の画像に最初のフレームを使用する代わりに、クリックしたい注目の画像を作成します。

ビデオブロックに関するよくある質問

このブロックの目的は何ですか？

このブロックを使用すると、Webサイトでビデオを簡単にホストでき、プレーヤーの動作を制御できます。

ビデオブロックとビデオ埋め込みの違いは何ですか？

YouTubeやVimeoなどのソースからの埋め込みビデオでは、プレーヤーの機能を制御することはできません。

このブロックを使用するための最良の方法は何ですか？

ループ付きの自動再生を使用し、製品のデモンストレーションと短いチュートリアルクリップのプレーヤーコントロールを削除します。 長い動画の場合は、自動再生を無効にし、コントロールを有効のままにします。

結論

これがWordPressビデオブロックの見方です。 私はそれが提供する制御のレベルが好きです。 左右の配置は、その周りのコンテンツで特に見栄えがよく、幅が広いと、ビデオに注目を集めるのに最適な方法です。 ポスター画像を追加すると、ユーザーの注意を引くことができます。 このブロックは、製品のデモンストレーション、チュートリアル、音楽などに最適です。

我々はあなたから聞きたい。 ビデオブロックを使用していますか？ コメントであなたの経験について教えてください。

PD99 /shutterstock.com経由の注目の画像