WordPressのYouTube埋め込みブロックの使用方法

YouTubeビデオの作成には時間がかかります。 最終的に終了し、ビデオがライブになったら、Webサイトを含め、可能な限りどこでも共有したいと思うでしょう。 または、WordPressサイトに投稿したい他の人のビデオがあるかもしれません。 あなたは誰かの作品についての解説を提供していて、あなたが話しているビデオを見せたいと思うかもしれません。 または、別の作成者がプロセスを説明するビデオを持っている場合があります。自分で作成するよりも、そのビデオを表示したほうがよいでしょう。

理由が何であれ、グーテンベルクエディターの専用の埋め込みブロックを使用すると、WordPressの投稿またはページにYouTubeビデオを追加できます。 ビデオにはナビゲーションボタンが付いているので、訪問者はYouTubeにリダイレクトしなくても、Webサイトのコンテンツを再生および視聴できます。

注：訪問者がWebサイトでYouTubeビデオを視聴すると、非個人データがYouTubeと共有されます。

この記事では、WordPressの投稿またはページにYouTubeのビデオまたはプレイリストを埋め込む方法について説明します。 また、いくつかのベストプラクティス、ヒント、およびFAQについても説明します。

さあ行こう！

私たちのYoutubeチャンネルを購読する

WordPressにYouTubeビデオを埋め込む方法

まず、従来のエディターではなく、WordPressのGutenbergエディターを使用していることを確認してください。 WordPressの投稿またはページで、プラス記号をクリックします。 （表示されない場合は、投稿またはページの本文をクリックしてください。）

ポップアップボックスで「YouTube」を検索し、 YouTubeアイコンをクリックします。 これにより、埋め込みボックスが投稿またはページに追加されます。

YouTubeで、埋め込みたいビデオに移動します。 アドレスバーからURLをコピーします。

それを埋め込みボックスに貼り付けて、[埋め込み]をクリックします。 必要に応じて、下にキャプションを追加します。 WordPressエディターでは、次のようなものが表示されます。

これはあなたの訪問者にどのように見えるかです：

WordPressにYouTubeプレイリストを埋め込む方法

YouTubeプレイリストを埋め込む場合、プロセスは非常に似ています。 YouTubeのプレイリストに移動し、アドレスバーからURLをコピーします。 WordPressに移動し、そのURLをYouTubeの埋め込みボックスに貼り付けます。 [埋め込み]をクリックします。

YouTubeプレイリストを埋め込むと、プレイリストの最初の動画がWordPressの投稿またはページに表示されます。 プレイリストのナビゲーションは右上隅にあります。 訪問者がハンバーガーアイコンをクリックすると、再生リストにあるすべてのビデオのスクロール可能なメニューが表示されるので、目的のビデオに移動したり、次に何が表示されるかを確認したりできます。

YouTube埋め込みブロック設定

YouTubeの埋め込みブロック設定にアクセスする場所はいくつかあります。 それらを調べてみましょう。

埋め込みボックスの上にあるツールバー

埋め込みボックスをクリックすると、上部にツールバーが表示されます。 左から右へ、オプションは次のとおりです。

• ブロックタイプまたはスタイルの変更：埋め込みブロックを段落、列、またはグループに変換できます。 ここで知っておくべき唯一のことは、埋め込みブロックの背景色を変更する場合は、[グループ]を選択すると、いくつかの色のオプションが表示されます。




• ドラッグ：ブロックをドラッグして再配置します。
• 上に移動/下に移動：ブロックを1スペース上または下に移動します。
• 配置の変更：左、右、中央、全幅、または全幅の配置を設定します。 テーマで許可されている場合にのみ、全幅または全幅の配置を使用できることに注意してください。
• URLの編集： URLを新しいものに置き換えます。
• オプション：より多くのブロックオプションを備えた別のメニューがあります。 それらについてはすぐに説明します。

その他のオプションメニュー

ブロックツールバーの右端にあるスリードットアイコンをクリックすると、メニューにさらにいくつかのオプションが表示されます。 それぞれが行うことは次のとおりです。

その他の設定を非表示：ページの右側にあるブロックのサイドバーを非表示（または表示）にします。
コピー：ブロックをコピーして、好きな場所に貼り付けます。
複製：そのすぐ下に表示されるブロックの複製を作成します。
前に挿入： YouTube埋め込みブロックの上に新しいブロックを追加します。
後に挿入： YouTube埋め込みブロックの下に新しいブロックを追加します。
移動先：ページに青い線が表示されます。 キーボードの矢印を使用して行を好きな場所に移動し、 EnterキーまたはReturnキーを押してブロックをその場所に移動します。
HTMLとして編集：ブロックのHTMLコードに変更を加えます。
再利用可能なブロックに追加：現在のブロックを再利用可能なブロックのリストに追加します。これにより、そのブロックを他のWordPressの投稿やページに簡単に追加できます。
グループ：メインツールバーの[グループ]オプションと同様に、これによりブロックの背景色を調整できます。
ブロックの削除：投稿またはページから埋め込みブロックを削除します。

サイドバーの設定

右側のサイドバーに、いくつかのオプションが表示されます。 メディア設定を使用すると、ユーザーがスマートフォンなどの小さなデバイスを使用しているときに、埋め込まれたビデオをどのように表示するかを制御できます。 この設定をオンにして、ブラウザのサイズが変更されたときにアスペクト比が維持されるようにすることをお勧めします。これにより、表示エクスペリエンスが向上します。

埋め込みブロックにCSSを追加できる[詳細設定]タブもあります。これは、より高度な方法でCSSをカスタマイズおよびスタイル設定できることを意味します。

ベストプラクティスとヒント

ステップをスキップしてください！

場合によっては、最初にYouTube埋め込みブロックを追加してから、後でURLを貼り付ける方がよい場合があります。 これは、ページまたは投稿のレイアウトで遊んでいて、コンテンツを追加する準備ができていない場合、またはビデオを追加することはわかっているが、どちらを選択するかわからない場合に適しています。 ただし、特定の動画を今すぐ追加する準備ができている場合は、URLを投稿またはページに貼り付けるだけです。 自動的に正しいブロックが追加され、ビデオが埋め込まれます。

ビデオの開始場所を選択する

ビデオの最初ではなく特定の部分で再生を開始する場合は、URLをコピーするときにこれを設定できます。 アドレスバーに移動する代わりに、ビデオの下にある[共有]ボタンを選択します。

[開始位置]の左側にあるボックスをクリックして、ビデオの再生を開始する時間を設定します。

これで、URLをコピーしてWordPressに追加できます。

プラグインをいつ使用するかを知る

YouTube埋め込みブロックは、サイトで動画や再生リストを取得する最も簡単な方法ですが、より高度なニーズがある場合は、サードパーティのプラグインの使用を検討することをお勧めします。 たとえば、ギャラリーを簡単に作成したり、埋め込みブロックを使用してYouTubeページを挿入したりすることはできないため、より多くの機能を備えたプラグインが必要になる場合があります。

よくある質問

YouTubeビデオを埋め込むことはできますか？

残念だけど違う。 すべてのYouTube動画を埋め込むことができるわけではありません。 パブリッシャーは、ビデオ設定への埋め込みを許可する必要があります。 一部の動画は制限され、共有できません。

WordPressにYouTubeビデオを埋め込むためのプラグインが必要ですか？

いいえ！ グーテンベルクエディターの専用YouTube埋め込みブロックを使用すると、プラグインを必要とせずにYouTube動画やプレイリストを簡単に埋め込むことができます。

グーテンベルクエディターを使用したくない場合はどうすればよいですか？

従来のエディターを使用する場合は、YouTubeのURLをコピーして、投稿またはページの本文に貼り付けることができます。 これにより、URLが自動的に埋め込みYouTubeビデオに変わります。 ただし、グーテンベルクに埋め込む場合と同じオプションはありません。

まとめ

ビデオはウェブサイトに命を吹き込み、エンゲージメントにも優れています。 YouTube埋め込みブロックの最も優れている点は、お気に入りの動画をWebサイトに表示するためにプラグインをインストールする必要がないことです。 ビデオに焦点を当てたWebサイトをお持ちの場合でも、初めてビデオコンテンツを試す場合でも、組み込みの埋め込みオプションを使用すると、Webサイトを思いどおりに表示するためのシームレスで高速な方法になります。 また、将来的に動画をさらに機能させる必要がある場合は、いつでもプラグインを試すことができます。 WordPress用の5つのお気に入りのビデオギャラリープラグインも集めましたので、ご覧ください。

注目の画像：Shutterstock.comのya_blue_ko