YouTube ライブ ストリームを Elementor に埋め込む方法 (5 分)
公開: 2023-06-09YouTube ライブ ストリームを Elementor に埋め込む方法をお探しですか?
あなたは一人ではありません! Elementor でライブビデオを表示することは、ウェブサイトをより魅力的なものにする優れた方法です。
しかし、YouTube ライブ ストリームを手動で埋め込むには、多くの複雑なコードを処理する必要があります。
ソリューション? YouTube ライブ ストリームを Elementor ウェブサイトに埋め込む最も簡単な方法を紹介します。
チュートリアルで説明する内容は次のとおりです。 以下のセクションをクリックするだけで、先に進むことができます。
- YouTube ライブ ストリームを Elementor に埋め込む理由は何ですか?
- YouTube ライブ ストリームを Elementor に追加する最も簡単な方法
- Elementor サイトに YouTube ライブ ストリームを埋め込む方法
YouTube ライブ ストリームを Elementor に埋め込む理由

WordPress の人気のページビルダーとして、多くの人が Elementor を使用して、コーディングなしで美しい Web サイトを作成しています。
ただし、Elementor サイトをさらに魅力的なものにする簡単な方法が必要な場合は、YouTube ライブ ストリームを埋め込むだけです。
そうすることで、長い動画コンテンツで人々のサイトへの興味をより長く保つことができます。
そしてそれは単なる始まりです! ウェブサイトで YouTube ライブ ストリームを使用できるその他の方法は次のとおりです。
- 重要なニュースやお知らせについて YouTube ライブ ストリームを表示し、多くの人に簡単にリーチできます
- ライブ ストリームを埋め込むことで、大量の新しい視聴者や登録者を獲得して YouTube チャンネルを成長させることができます
- ライブ ストリームでは視聴者とリアルタイムで対話できるため、訪問者との関係を構築し、熱心な顧客に変えることができます。
- ライブ ストリームを使用すると、製品に対する肯定的なレビューや感想を表示できます。 この社会的証明があれば、ウェブサイトでより多くの売上を得ることができます。
- さらにもっと…
ご覧のとおり、Elementor ウェブサイトで YouTube ライブ ストリームを表示することで、ブランドの成長を開始できる方法はたくさんあります。
それでは、WordPress サイトに YouTube コンテンツを埋め込む最も簡単な方法を見てみましょう。
YouTube ライブ ストリームを Elementor に追加する最も簡単な方法
ウェブサイトに YouTube ビデオを埋め込む場合、最良のオプションは YouTube Feed Pro プラグインを使用することです。

YouTube Feed Pro を使用すると、数回クリックするだけで、YouTube のプレイリスト、チャンネル、ライブ ストリーム、お気に入りリストなどからビデオを表示できます。
プラグインのシンプルな 3 ステップのガイド付きフローに従うだけで、HTML、CSS、またはいかなる種類のコードも必要とせずに、フィードを作成、カスタマイズし、サイトに埋め込むことができます。
それに加えて、YouTube Feed Pro は Elementor とも完全に互換性があります。 そのため、わずか数分で魅力的な YouTube ビデオやライブ ストリームを表示できます。
さらに、YouTube フィードのデザインを細かく制御できます。 ビジュアル カスタマイザーから、数回クリックするだけで YouTube フィードのデザインを変更できます。

YouTube Feed Pro も、超高速になるように最初から設計されています。 好きなだけビデオを埋め込むことができ、Web サイトはこれまでと同じくらい速く読み込まれます。
ウェブサイトが高速になると SEO も大幅に向上するため、より多くの顧客に簡単にリーチできるようになります。
総合的に見て、YouTube Feed Pro は市場で最高の YouTube フィード プラグインであることは間違いありません。
YouTube ライブ ストリームを埋め込む準備はできましたか? 今すぐ YouTube フィード Pro のコピーを入手してください。
それでは、このプラグインを使用して YouTube ビデオを埋め込む方法を見てみましょう。
Elementor サイトに YouTube ライブ ストリームを埋め込む方法
以下に、Elementor WordPress サイトに YouTube ライブ ストリームを埋め込むための簡単な手順を示します。
始めましょう!
ステップ 1: YouTube フィード Pro をインストールする
まず、ここから YouTube Feed Pro プラグインのコピーを入手し、ウェブサイトにインストールします。
方法がわかりませんか? 詳細については、WordPress プラグインのインストール方法に関するこのチュートリアルをご覧ください。
プラグインの準備ができたら、ステップ 2 に進み、ライブ YouTube ビデオのフィードを作成できます。
ステップ 2: ライブ YouTube フィードを作成する
これで、プラグインのガイド付きフローに従って、ライブ ストリーム用の新しい YouTube フィードを作成できるようになりました。
そのためには、ダッシュボードからYouTube フィード » すべてのフィードメニューを開き、上部にある [新規追加]ボタンをクリックします。

これで、サイトに表示する YouTube コンテンツの種類を選択できるようになります。
ここでは[ライブ ストリーム]オプションを選択し、 [次へ]ボタンをクリックします。

これで、ウェブサイト上にライブ ストリームを表示できる新しい YouTube フィードが作成されました。
ステップ 3 では、新しいフィードを YouTube アカウントに接続できます。
ステップ 3: YouTube アカウントを接続する
YouTube アカウントを接続すると、新しいフィードで YouTube からのライブ ストリームを Web サイトに表示できるようになります。
これを行う最も簡単な方法は、 YouTube API キーを使用することです。
API キーをまだお持ちでない場合は、このステップバイステップ ガイドを参照して YouTube API キーを作成してください。
それが完了したら、YouTube API キーをコピーし、WordPress サイトを開きます。
API キーをポップアップに貼り付けて、 [追加]をクリックします。

フィードの YouTube への接続を完了するには、埋め込みたいライブ ストリームを選択します。
まず、ライブ ストリームが含まれる YouTube チャンネルを開きます。 そこに着いたら、上部にある URL を探してください。
URL の「/channel/」または「/user/」の後のコードをコピーします。

コードをコピーした後、Web サイトに戻り、 「ライブストリームのチャンネル ID を追加」フィールドにコードを貼り付けます。
それが完了したら、 「次へ」をクリックすると、ライブ YouTube フィードの準備が整います。

この YouTube フィードはサイトのデザインを自動的にコピーするので、ライブ ストリームはすぐに見栄えが良くなります。
さらに、次のステップでは YouTube ライブ ストリームの見た目をカスタマイズすることもできます。
ステップ 4: YouTube ライブ フィードをカスタマイズする
カスタマイズ オプションを使用すると、サイト上での YouTube ビデオの表示方法を簡単に変更できます。
開始するには、プラグインはフィード用に事前に構築されたテンプレートを選択するように求めます。 8 つの異なるフィード テンプレートから選択できます。
- デフォルト
- カルーセル
- カード
- リスト
- ギャラリー
- 最新のビデオ
- ショーケースカルーセル
- ウィジェット
使用するレイアウトを選択し、 「次へ」をクリックするだけです。

これで、プラグインのライブ フィード エディターを使用してライブ ストリームを詳細にカスタマイズする準備が整いました。
左側のオプションを使用して、フィードのレイアウト、配色、ヘッダー、「さらに読み込む」ボタンなどを設定できます。
右側に、YouTube フィードのライブ プレビューが表示されます。 こうすることで、すべての変更をリアルタイムで追跡し、フィードがどのように表示されるかを確認できます。

フィードのデザインを開始する準備ができたら、左側にある[フィード レイアウト]オプションをクリックします。

ここから、Web サイト上の YouTube ライブ ストリームのレイアウトを変更できます。

フィード レイアウトを設定するには、グリッド、ギャラリー、リスト、カルーセルの 4 つの異なるオプションから選択できます。

最初のオプションは、YouTube ライブ ストリームをさまざまな行と列に表示するグリッドレイアウトです。
その結果、ビデオはきちんとした正方形のサムネイルで表示されます。

最新のライブ ストリームをより見やすくしたい場合は、ギャラリーレイアウトを選択することもできます。
こうすると、ギャラリーの上部に大きなビデオが表示され、その下に小さなサムネイルが表示されます。

ライブ ストリームがサイト上でより多くのスペースを占めるようにしたいですか?
ここでオプションからリストのレイアウトを選択するだけです。

カルーセルレイアウトを選択して、サイト上で YouTube ライブ ストリームのスライドショーを表示することもできます。
訪問者はサイトを操作して好みのビデオを選択できます。

希望のオプションを選択した後、 「保存」をクリックして変更を確認します。
それが完了したら、上部にある[カスタマイズ]ボタンをクリックして、ライブ YouTube フィードのデザインを続けます。

次のステップでは、ライブ フィード エディターを使用してフィード ヘッダーの外観をカスタマイズできます。
まず、左側の[ヘッダー]オプションをクリックします。

左上の切り替えオプションを使用して、ヘッダーを有効または無効にできるようになりました。
ヘッダーが有効になっている場合は、以下の 2 つの異なるヘッダー スタイルから選択できます。
- 標準:チャンネル名、説明などを含むビジュアルヘッダーを表示します。
- テキスト: YouTube フィードの上部にカスタム見出しを追加します。

新しいヘッダー デザインを保存するには、最後に[保存]ボタンをクリックします。
その後、残りのカスタマイズ オプションを使用して、ライブ YouTube のデザインを完了できます。 数回クリックするだけで、ライブ ストリームの数、配色、ボタンのデザインの読み込みなどを変更できます。
YouTube フィードの見た目に満足したら、必ず[保存]をクリックしてください。
最後に、ステップ 5 でプラグインを使用して、Elementor サイトに YouTube ライブ ストリームを埋め込むことができます。
ステップ 5: Instagram フィードを Elementor に追加する
カスタマイズが完了したら、YouTube ライブ ストリームを Elementor に追加します。 これはビジュアル カスタマイザーから直接行うことができ、コーディングは必要ありません。
まず、右上隅にある「埋め込み」ボタンをクリックします。

これを行うと、YouTube フィードの埋め込みオプションが開きます。 ここからページ、サイドバー、またはフッターに直接埋め込むことができます。
ここでは、 「コピー」ボタンをクリックしてショートコードをコピーします。

ショートコードを取得したので、ダッシュボードから [ページ] » [新規追加]メニューに移動して、新しいページを作成します。
その後、上部にある「Elementor で編集」ボタンをクリックするだけです。

代わりに、ここで新しい WordPress 投稿を作成することもできます。
これを行うには、ダッシュボードから投稿 » 新規追加に移動し、 Elementor で編集を選択します。
この例では、WordPress ページを使用します。

Elementor エディターが開いたら、左側のパネルにすべてのElementor ウィジェットが表示されることを確認します。
検索フィールドに「ショートコード」と入力すると、検索結果にショートコードウィジェットが表示されます。

フィードを埋め込むには、ショートコード ウィジェットをドラッグし、ページ上にドロップします。

YouTube フィードを埋め込むには、先ほどのショートコードを「ショートコードを入力してください」フィールドに貼り付けるだけです。
これを行うと、右側に YouTube ライブ ストリームが表示されます。

最後に、左下の「公開」または「更新」ボタンをクリックします。
このようにして、Elementor Web サイトに YouTube ライブ ストリームのフィードが表示されます。

以上です!
これで、Elementor Web サイトに YouTube ライブ ストリームを簡単に埋め込む方法がわかりました。 このようにして、視聴回数を増やしたり、訪問者を引きつけたり、YouTube チャンネルを成長させたりすることができます。
必要なのは YouTube Feed Pro プラグインだけで、あらゆる種類の YouTube コンテンツを簡単に埋め込むことができます。 一番良いところ? これらすべてをまったくコーディングせずに行うことができます。
YouTube ライブ ストリームを Elementor に埋め込む準備はできましたか? 今すぐ YouTube フィード プロを入手してください!
YouTube チャンネルを簡単に成長させたいですか? YouTube チャンネルをウェブサイトに埋め込む方法については、このガイドを参照してください。
この記事がお役に立った場合は、Twitter と Facebook をフォローして、ソーシャル メディア マーケティングのヒントやコツをさらにご覧ください。