WordPressにYouTubeライブストリームを埋め込む方法

WordPressサイトを通じてライブ動画コンテンツを共有することは、リアルタイムで視聴者と関わるための強力な方法です。

YouTubeライブストリームを埋め込むことで、訪問者はウェブサイト上で直接イベント、ウェビナー、特別放送を視聴でき、ユーザーインタラクションを向上させ、リーチを拡大できます。

WPBeginnerでは、YouTubeを大きなトラフィックを生み出す強力なプラットフォームとして認識しています。そのため、独自のチャンネルを作成し、定期的に動画を投稿して、ブログへの訪問者を増やしています。この戦略は、私たちのリーチを拡大し、より幅広いオーディエンスとつながるのに役立ちました。

この記事では、WordPressにYouTubeライブストリームを簡単に埋め込む方法を説明します。

WordPressにYouTubeライブストリームを埋め込む理由

ライブストリーミングを使用すると、インターネット経由でライブビデオまたはオーディオコンテンツをブロードキャストでき、ユーザーはリアルタイムでビデオを視聴できます。

WordPress ウェブサイトに YouTube のライブストリームを埋め込むことは、視聴者とつながり、より多くのユーザーにリーチするための優れた方法です。

また、サイト訪問者とやり取りできるようにすることで、ユーザーエンゲージメントを高めることもできます。

YouTubeのライブストリームは、ウェブサイトのSEOを向上させ、より多くのトラフィックを引き付けるのに役立ちます。調査によると、少なくとも1つの動画を含むブログ投稿は、動画を含まないコンテンツよりも約83％多くの訪問者を獲得しています。

それでは、YouTubeのライブストリームをWordPressに簡単に埋め込む方法を見てみましょう。

WordPressにYouTubeライブストリームを埋め込む方法

YouTubeライブストリームを埋め込む最も簡単な方法は、Smash BalloonのYouTube Feed Proプラグインを使用することです。

これは、YouTube動画やライブストリームをウェブサイトに埋め込むことができる、市場で最高のWordPress YouTubeプラグインです。

まず、YouTube Feed Proプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPress管理画面のサイドバーからYoutubeフィード » 設定ページにアクセスしてください。ここでライセンスキーを入力し、「有効化」ボタンをクリックする必要があります。

この情報はSmash Balloonのウェブサイトのアカウントから取得できます。

次に、WordPress ダッシュボードから YouTube Feeds » All Feeds ページにアクセスします。

ここから、上部にある「新規追加」ボタンをクリックします。

これにより、画面に「フィードタイプの選択」プロンプトが表示されます。

続行するには、「ライブストリーム」オプションを選択し、「次へ」ボタンをクリックする必要があります。

次のステップでは、YouTube Feed ProをYouTubeアカウントに接続する必要があります。YouTube APIキーの提供を求められます。

すでにAPIキーをお持ちの場合は、コピーして「APIキーを入力」ボックスに貼り付け、「追加」ボタンをクリックするだけです。

YouTube APIキーを作成する

まだAPIキーをお持ちでない場合は、Google Cloud Consoleにアクセスし、Googleアカウントを使用してサインインしてください。

ログインしたら、一番上にある「プロジェクトを選択」ボタンをクリックします。

これによりポップアップウィンドウが開き、作成したすべてのプロジェクトが表示されます。

次に、右上にある「新規プロジェクト」ボタンをクリックします。

これで「新規プロジェクト」ページに移動し、プロジェクトの名前を入力することから始めることができます。プロジェクトを簡単に識別できるものであれば何でも構いません。

次に、ドロップダウンメニューから「組織」とその場所を選択する必要があります。「組織なし」を選択して「作成」ボタンをクリックすると続行できます。

プロジェクトが作成されると、プロジェクトダッシュボードに移動します。

ここから、トップメニューの「+ APIとサービスを有効にする」ボタンをクリックします。

これで API ライブラリ ページに移動します。プロジェクトで使用できる API を作成できるさまざまな Google サービスが表示されます。

次に、検索ボックスで「YouTube Data API v3」を検索してください。

「YouTube Data API v3」の結果が表示されたら、それをクリックするだけです。

これで新しい画面に移動し、YouTube APIキーを有効にするために「有効にする」ボタンをクリックする必要があります。

これにより、「API/サービスの詳細」ページに移動します。

ここから、上部にある「クレデンシャルを作成」ボタンをクリックします。

次に、新しいページにリダイレクトされ、「公開データ」オプションの横にあるボックスをチェックする必要があります。

その後、「次へ」ボタンをクリックしてAPIを作成します。

APIキーが作成され、ページに表示されます。

このキーをコピーして、「完了」ボタンをクリックするだけです。

さて、WordPressダッシュボードに戻る時間です。

APIキーが必要なボックスにAPIキーを貼り付けます。次に、「追加」ボタンをクリックして続行します。

YouTubeライブストリームをWordPressウェブサイトに追加する

YouTube APIキーを追加すると、「フィードタイプの選択」ページにリダイレクトされます。

ここから、「ライブストリーム」オプションを再度クリックし、「次へ」ボタンをクリックします。

これにより、「ライブストリーム用チャンネルIDを追加」ページが開きます。

次に、ライブストリーム動画が含まれている YouTubeチャンネル にアクセスする必要があります。

ここから、URLの先頭にある「/channel/」または「/user/」の後のテキストをコピーします。

次に、WordPressダッシュボードに戻り、「ライブストリーム用チャンネルIDを追加」ボックスにコードを貼り付けます。

その後、「接続」ボタンをクリックして、YouTubeチャンネルとWordPressを接続します。

チャンネルが接続されたら、「次へ」ボタンをクリックして続行します。

YouTubeフィードをカスタマイズする

YouTubeライブストリームフィードが作成されたので、カスタマイズできます。Smash BalloonのYouTube Feed Proは、さまざまな表示オプションを提供します。

まず、「テンプレートから開始」ページでテンプレートを選択する必要があります。デフォルト、カルーセル、カード、リスト、ギャラリー、グリッドのレイアウトから選択できます。

選択が完了したら、「次へ」ボタンをクリックします。

これが完了すると、編集画面が開きます。右側にはYouTubeフィードのプレビューが表示され、左側のメニュー列にはカスタマイズ設定が表示されます。

ここで、「フィードレイアウト」パネルを展開することから始められます。

この画面で、レイアウトを切り替えることができます。

選択したレイアウトに応じて、追加の設定を構成することもできます。

次に、「カラー スキーム」パネルをクリックする必要があります。

デフォルトでは、YouTube Feed ProはWordPressテーマと同じカラー スキームを使用します。ただし、ビデオフィードに「ライト」または「ダーク」のカラー スキームを使用することもできます。

「カスタム」オプションをクリックし、コントロールを使用して背景、テキスト、リンクの色を変更することで、独自の配色をデザインすることもできます。

YouTubeフィードにヘッダーを追加するには、「ヘッダー」パネルにアクセスする必要があります。ここで、「有効化」スイッチを切り替えてヘッダーを有効にします。

標準とテキストのヘッダースタイルを切り替えるためのコントロールを使用することもできます。「テキスト」オプションを選択すると、テキストのサイズと色を変更できます。

「動画」パネルに移動することで、動画プレーヤーの外観をカスタマイズすることもできます。

ここにオプションのリストが表示されます。

動画のレイアウトと個々のプロパティをカスタマイズするには、「動画スタイル」設定パネルにアクセスしてください。

ここで、ビデオのレイアウト、背景色、境界線を選択できます。

その後、「個々の要素の編集」パネルを開きます。ここで、YouTubeライブストリーム動画と一緒に表示したい要素の横にあるチェックボックスをオンにします。

再生アイコン、動画タイトル、ライブストリーム カウントダウン、説明などを表示または非表示にできます。

次に、「ホバー状態」設定に移動します。ここで、ユーザーがYouTube動画にマウスカーソルを合わせたときに表示される個々の要素を選択できます。

動画のタイトル、説明、日付、再生回数など、多くの要素を選択できます。

その後、「動画プレーヤーエクスペリエンス」パネルにアクセスします。

ビデオプレーヤーのアスペクト比を変更できるようになりました。ビデオを自動再生するか、訪問者が再生ボタンをクリックするまで待つかを選択することもできます。

個々の動画要素をカスタマイズした後、「もっと読み込むボタン」パネルに切り替えます。

ここで、「もっと読み込むボタン」の設定の下にあるトグルを「有効にする」に切り替えることができます。これにより、ライブストリーム後にさらに多くの動画候補が表示されます。

左側のパネルの設定から、背景色、ホバー状態、テキストを選択することもできます。

その後、「購読ボタン」パネルに切り替え、「YouTube購読ボタン」を有効にしたい場合はスイッチを「有効」に切り替えます。

設定でボタンの色、テキスト、ホバー状態を変更することもできます。

YouTubeライブフィードをカスタマイズしたら、デスクトップコンピューター、タブレット、スマートフォンでどのように表示されるかプレビューできます。右上隅にある異なるボタンをクリックするだけで、さまざまなデバイスでフィードをプレビューできます。

最後に、変更を保存するために、一番上にある「保存」ボタンをクリックすることを忘れないでください。

YouTubeライブストリームをWordPressページに埋め込む

次のステップは、YouTubeのライブフィードをWordPressのページに埋め込むことです。これを行うには、まず上部にある「埋め込み」ボタンをクリックする必要があります。

これにより、「フィードの埋め込み」プロンプトが開きます。続行するには、「ページに追加」ボタンをクリックします。

ポップアップに、ウェブサイト上のすべてのWordPressページのリストが表示されます。

YouTubeライブストリームを埋め込みたいページを選択し、「追加」ボタンをクリックするだけです。

選択したページがブロックエディターで開きます。

ここから、左上隅にある「ブロックを追加」（+）ボタンをクリックし、Feeds for YouTubeブロックを検索します。

見つけたら、クリックしてページに追加できます。

変更を保存したり、公開したりするには、「更新」または「公開」ボタンをクリックすることを忘れないでください。

こちらがYouTubeライブフィードがデモウェブサイトでどのように表示されるかです。

YouTubeライブフィードをウィジェットとして追加する

YouTubeライブフィードをWordPressサイドバーに「ウィジェット」として追加することもできます。

まず、管理サイドバーから外観 » ウィジェットページに移動します。

ここで、画面左上の「ブロックを追加」（+）ボタンをクリックし、「YouTubeフィード」ブロックを見つけます。

次に、ブロックをクリックしてウィジェットエリアに追加します。

変更を保存するには、「更新」ボタンをクリックすることを忘れないでください。

サイドバーのYouTubeライブフィードが、デモウェブサイトでどのように表示されるかです。

フルサイトエディターにYouTubeライブストリームを追加する

フルサイト編集に対応したブロックベースのテーマを使用している場合は、この方法が適しています。

まず、管理画面のサイドバーから外観 » エディターページに移動して、サイトエディターを起動します。

ここから、一番上にある「ブロックを追加（+）」ボタンをクリックし、「YouTube用フィード」ブロックを探します。

次に、ブロックをドラッグアンドドロップして、ページ上のどこにでもYouTubeフィードを表示できます。

完了したら、「保存」ボタンをクリックして変更を適用することを忘れないでください。

ここに、デモウェブサイトでのライブストリームのプレビューがあります。

ボーナス：WordPressにYouTubeプレイリストを埋め込む

ライブストリームの他に、Smash Balloon YouTube Feed プラグインを使用して、WordPress サイトに YouTube プレイリストを埋め込むこともできます。

このプレイリストを使用して、ユーザーの注意を引き、エンゲージメントを高め、直帰率を減らすことができます。

YouTubeプレイリストを追加するには、YouTube Feeds » All Feedsページにアクセスし、「新規追加」ボタンをクリックします。これにより新しい画面に移動し、フィードタイプとして「プレイリスト」オプションを選択する必要があります。

次に、Google ConsoleからAPIキーを提供して、YouTubeアカウントをSmash Balloonに接続する必要があります。

その後、追加したいYouTubeプレイリストを開き、上記のURLからIDをコピーする必要があります。このIDは、URLの「=」記号の後の英数字の文字列になります。

これで、WordPressダッシュボードにアクセスして、「ソースの追加」フィールドにプレイリストIDを追加し、「次へ」ボタンをクリックできます。

それが完了すると、Smash Balloonのフィードエディタが画面に表示され、プレイリストの外観をお好みに合わせてカスタマイズできます。

YouTubeプレイリストが正常に追加されました。詳細については、WordPressにYouTubeプレイリストを埋め込む方法（最良の方法）に関するチュートリアルをご覧ください。WordPressにYouTubeプレイリストを埋め込む方法。

この記事が、WordPressにYouTubeライブストリームを埋め込む方法を学ぶのに役立ったことを願っています。また、oEmbedを使用してWordPressの投稿にSoundCloudを埋め込む方法に関するチュートリアルや、WordPressにDiscordウィジェットを埋め込む方法に関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。