ウェブサイトに複数のYoutube動画を埋め込む方法(簡単な方法)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ ウェブサイトに複数のYoutube動画を埋め込む方法(簡単な方法)

ウェブサイトに複数のYoutube動画を埋め込む方法(簡単な方法)

ウェブサイトに複数のYoutube動画を埋め込む方法

ウェブサイトに複数のYouTube動画を埋め込む最良の方法をお探しですか?

WordPressでYouTube動画をクロスプロモーションすることは、ユーザーのエンゲージメントを高め、購読者を増やす素晴らしい方法です。

WordPressの専門家でなくても、思ったより簡単で速い!

この投稿では、WordPressサイトに複数のYouTube動画を埋め込む最も簡単な方法について学びます。

その前に、YouTubeのコンテンツを埋め込むさまざまな方法を見てみましょう。

または、ここをクリックして直接チュートリアルに飛ぶこともできる。

ウェブサイトに複数の動画を埋め込む方法

インターネット上のビデオコンテンツといえば、ユーチューブが26億人のユーザーを抱えるNo.1プラットフォームであることは間違いない!

ご覧の通り、VimeoやDailymotionのような小さな競合他社よりもはるかに人気がある。

また、YouTubeの動画をウェブサイトに追加すれば、簡単にチャンネルを増やし、訪問者を惹きつけることができます。さらに、関連動画を表示して、訪問者の関心を高めることもできます。

youtubeフィードの例

さらに、ウェブサイトにビデオ証言を表示すれば、売上を急増させることもできる。

YouTubeの動画をウェブサイトに埋め込むには、2つの方法があります:

  • 自動化信頼できるWordPressプラグインを使って、ウェブサイトに複数の動画を自動的に表示しましょう。5分以内にYouTube動画を埋め込むことができます。
  • 手動ですべての動画のYouTube動画埋め込みコード、動画URL、または動画IDを取得し、そのYouTube埋め込みコードを1つずつ手動で埋め込み、複数のウェブページを切り替えます。

特に、技術に精通していなかったり、HTMLやその他の分かりにくいスクリプト言語をコーディングする専門家でなかったりする場合は、手作業は難しいかもしれない。

埋め込みコードをコピーする youtube feed pro

複数のYouTube動画をサイトに追加する最も簡単な 方法とは?

1つ目の方法は、YouTubeフィードプラグインを利用することです。

複数のYouTube動画を埋め込む最も簡単な方法

YouTubeの動画を埋め込むツールはたくさんありますが、このガイドではWordPressに最適なYouTubeフィード・プラグインを使用します:YouTube Feed Proです。

  • このプラグインを使えば、YouTubeのプレイリスト、ライブストリーム、チャンネルなどを簡単にウェブサイトに埋め込むことができます。
  • YouTube動画のフィードを埋め込むと、フィードは自動的にあなたのウェブサイトのデザインをコピーし、そのまま美しく表示されます。
  • チャンネルやプレイリストに新しいビデオが追加されるたびに、プラグインはあなたのサイトに新しいYouTubeビデオを動的に埋め込むことができます。
  • あなたのウェブサイト上でビデオがどのように見えるかを選択するために、多くのオプションを備えた便利なビジュアルカスタマイザーが用意されています。
ライブ・フィード・エディター

さらに、このプラグインは、誰かがあなたのページを開いたときに動画を自動再生しません。つまり、大量の動画を埋め込んでも、サイトの読み込みは超高速なのです。

また、サイトが速くなるということは、あなたのサイトのSEOが向上するということであり、WordPressウェブサイトはさらに多くの人々にリーチすることができます。

複数のYouTube動画を簡単に追加する方法

簡単に、素早く、手間をかけずに、ウェブサイトに複数の動画を表示するために、以下の手順をご確認ください:

ステップ 1: YouTube Feed Pro プラグインをインストールする

まず、YouTube Feed Proプラグインを入手し、WordPressサイトにアップロードする。

その方法がわからない場合は、WordPressのプラグインをインストールする方法についての簡単な説明に従ってください。

ステップ2:YouTubeフィードを作成する

次のステップは、YouTubeチャンネルをプラグインに接続することです。

まず、ダッシュボードからYouTube Feed " All Feeds メニューに進みます。そして、一番上の新規追加 ボタンをクリックします。

新しいフィードを追加してYoutubeプレイリストを埋め込む

さて、次は複数のYouTube動画を取得するフィードの種類を選ぶ番だ。

そのためには、ここで6種類のYouTubeフィード・タイプから選ぶことができる:

  • チャンネルこのフィードタイプでYouTubeチャンネル全体をサイトに埋め込む
  • プレイリスト:選択したYouTubeプレイリストから複数の動画を埋め込む
  • お気に入り選択したYouTubeチャンネルが「お気に入り」としてマークした動画を表示します。
  • 検索:特定の検索ワードやフレーズに基づいて複数のYouTube動画を埋め込む
  • ライブストリーム:今後予定されている、または既存のYouTubeライブストリームの複数のビデオを埋め込む
  • 単一のビデオ:特定の動画を並べ替えて表示する

YouTubeフィードの種類を選択したら、「次へ」 ボタンをクリックして次に進みます。

youtubeフィードの種類

ステップ3:YouTubeにフィードを接続する

次に、アカウントとプラグインのリンクを成功させるために、YouTube APIキーを入力します。そうすれば、このYouTubeフィードはYouTubeからの動画をあなたのウェブサイトに表示することができます。

APIキーの作成と使用については、こちらのチュートリアルをご覧ください。

次に、APIキーをポップアップに貼り付けAddをクリックする。

youtubeにapiキーを追加

YouTubeフィードのソースを選択できるようになりました。

YouTube Feed Pro を使えば、コードスニペットの src を使う必要はありません。埋め込みたい YouTube チャンネル、プレイリスト、お気に入りリスト、ライブストリームなどを選択するだけです。

この例では、YouTubeのプレイリストをソースとして追加します。まず、https://www.youtube.com/、埋め込みたいYouTubeプレイリストにアクセスします。

次に、上部にあるチャンネルURLをチェックしてください。ここにある"?list="以降の文字がプレイリストIDになるので、コピーして ください。

youtubeのプレイリストIDをコピーする

その後、ウェブサイトに戻ってYouTubeフィードの設定を完了することができます。

先ほどコピーしたIDをプレイリストIDフィールドに貼り付け、「 次へ」をクリックします。

プレイリストIDを挿入する

ステップ4:YouTubeフィードのデザインをカスタマイズする

YouTube Feed Proの素晴らしいところは、あなたのブランディングに合わせて既存のテーマのデザインを自動的にコピーしてくれるところです。

また、YouTubeフィードのデザインをカスタマイズしたい場合にも、さまざまなオプションが用意されている。

まず、YouTube フィード用のフィードテンプレート集から選ぶことができます。そうすれば、事前に作成されたデザインを簡単にインポートして、美しいYouTubeフィードをオンラインで公開する準備ができます。

  • デフォルト
  • カルーセル
  • カード
  • リスト
  • ギャラリー
  • 最新ビデオ
  • ショーケース・カルーセル
  • ウィジェット

お好みのフィード・テンプレートを選択し、「次へ」 ボタンをクリックします。

フィードテンプレートを選ぶ youtubeフィードプロ

この後、YouTubeフィードの見栄えを変更するために使用できるライブフィードカスタマイザーが表示されます。

左側にはカスタマイズパネルがあり、フィードのレイアウト、配色、ヘッダーデザイン、ロードモアボタンなどを設定することができます。

Youtubeフィードプロプラグイン用ライブフィードエディタ

また、右側にYouTubeフィードのライブプレビューが表示されます。このように、簡単にリアルタイムで変更を追跡することができます。

カスタマイズを始めるには、左のフィードレイアウトボタンをクリックしてください。

フィードレイアウトオプションを選択 youtubeフィードプロ

このプラグインでは、4つのレイアウトテンプレートから選択することができます:グリッド、ギャラリー、リストカルーセル

サイトに複数のYouTubeを埋め込むので、これらの動画をどのように表示させたいかをカスタマイズできる。

フィードレイアウト

例えば、グリッドレイアウトを 選択すると、動画は正方形のサムネイルで統一されたグリッドに表示されます。こんな感じです:

Youtubeフィードプロのグリッドレイアウト

ウェブサイトにビデオ証言を表示する場合、動画のギャラリーレイアウトを 選択できます。

こうすることで、最初の動画が大きなサムネイルとして表示され、その下に複数のサムネイル画像が表示されるため、サイト訪問者にもっと見てもらうことができます。

ギャラリー・レイアウト・ユーチューブ

埋め込んだYouTube動画をよりシンプルなデザインで紹介したいですか?WordPressにYouTubeフィードを追加するには、リストレイアウトが 必要かもしれません:

ユーチューブ用リストレイアウト

最後に、複数のYouTube動画をスライドショー形式にしたい場合は、このようなカルーセルレイアウトを 選ぶことができる:

フィードのレイアウトを選択したら、「保存 」をクリックしてカスタマイズを確定します。

次に、YouTubeフィードのデザインを変更するには、上部にあるカスタマイズ ボタンを探してください。

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

次に、このプラグインを使ってYouTubeフィードの色をカスタマイズすることができます。そのためには、左側の配色 オプションをクリックしてください。

配色オプションを選択 youtubeフィードプロ

そうすれば、YouTubeフィードの配色を4種類から選ぶことができる:

  • テーマからの継承: テーマの色を自動的にコピー
  • 明るい:暗いフォントで明るい背景を表示する
  • ダーク:暗い背景に明るいフォント
  • カスタム:手動でフィードのすべての色を選択します。
youtubeフィードプロの配色オプション

最後に「保存 」をクリックして、新しい配色を確定します。

その後、残りのオプションを使って、YouTubeフィードのヘッダー、ボタン、フィードサイズ、ライトボックスなどを簡単にカスタマイズできます。

YouTube動画フィードの見た目に満足したら、もう一度「保存」をクリックします。

ステップ5:WordPressにYouTube動画のフィードを埋め込む

このプラグインを使えば、YouTubeのフィードを埋め込むことで、ウェブサイトに複数の動画を簡単に表示することができる:

  1. WordPressのあなたのページ、または、
  2. WordPressのサイドバーまたはフッターに表示する

以下では、この2つのオプションについて説明しよう。

WordPressページに複数のYouTube動画を埋め込む

YouTubeの動画を WordPressのページに追加するには、ライブフィードエディタを使用します。

上部の埋め込み ボタンをクリックするだけで、すぐに始められます。

カスタマイザーでYoutubeプレイリストを埋め込む

そうすると、YouTubeの動画をどこに埋め込むかを尋ねるポップアップが開きます。

続行するには、ここで「ページに追加」ボタンをクリックしてください。

Youtubeフィードをページに埋め込む

このプラグインは、あなたのウェブサイトのWordPressページのリストを表示するので、1つのページに複数のYouTube動画を埋め込むことができます。

お好みのページを選択したら、「追加」をクリックします。

ワードプレスのページを選択

WordPressエディタ内でプラス(+)アイコンをクリックし、新しいWordPressブロックを選択します。

ワードプレスのブロックページを追加する

次に、検索フィールドに「feeds for youtube」と入力する。

次に、YouTubeのフィードブロックをクリックして、複数のYouTube動画をウェブサイトのサイドバーやフッターに埋め込みます。

Youtubeブロックにフィードを追加

複数のビデオフィードが自動的にブロックエディタに表示されます。

ページが完成したら、Updateをクリックして変更を保存します。

グリッド・レイアウト・ユーチューブ・フィードの例

これで、あなたのウェブサイトの1ページに複数のYoutube動画を埋め込む方法がわかりました。

WordPressのサイドバーやフッターに複数のYouTube動画を埋め込む

また、複数のYouTube動画をYouTubeウィジェットとしてウェブサイトのウィジェット対応エリアに追加することもできます。

サイドバーにYouTubeフィードを埋め込むには、まずダッシュボードからYouTubeフィード " すべてのフィードに アクセスしてください。

次に、埋め込みたいYouTubeフィードをクリックします。

Youtubeフィードギャラリーを開く

これで、YouTubeのフィードが再びライブフィードエディターで開かれます。

ここから、右上の埋め込み ボタンをクリックして、YouTubeフィードの埋め込みを開始できます。

Youtubeフィードを埋め込む

このポップアップでは、YouTube動画をウィジェットとして埋め込むか、サイドバーやフッターに埋め込むかを選択できます。

これを行うには、「ウィジェットに追加」ボタンをクリックする。

ウィジェットに追加する

そうすると、サイトのウィジェットページが 開き、WordPressウィジェットを簡単に追加、削除、管理することができます。

ここで、サイドバーパネルを クリックして始めることができます。

サイドバーパネルを開く

また、YouTubeの動画をフッターに埋め込みたい場合は、フッターパネルを クリックしてください。

チュートリアルではサイドバーを選ぶことにしよう。

フッターパネルを開く

新しいウィジェットを追加するには、ここでプラスアイコン(+) をクリックしてください。

そして、オプションからYouTubeウィジェットのフィードを選択します。

サイトにYoutubeウィジェットを追加する

ウェブサイトのサイドバーやフッターに複数のYouTube動画を埋め込むには、「更新」 ボタンをクリックします。

これで、ウェブサイトのフロントエンドにアクセスすると、埋め込み動画フィードがサイドバーに表示されるようになります。以下はそのスクリーンショットです:

サイドバーにYoutubeフィードを埋め込む

それで終わりだ!

HTMLコードを触ったり、開発者を雇ったりする必要はありません!

YouTube Feed Proを使えば、YouTubeの登録者を増やし、ブランドのソーシャルメディアでの存在感を高めることができます。さらに、コンバージョンを高め、ウェブサイトでの売上を増やすこともできます。

ウェブサイトに複数の動画を表示する準備はできましたか?ここでYouTube Feed Proを始めましょう。

YouTubeマーケティングに関する記事をもっと読みたいですか?次回は、レスポンシブYouTube動画をWordPressに埋め込む方法をご紹介します。

最後に、このガイドが役に立ったなら、ツイッターや フェイスブックでYouTubeのチュートリアルをフォローしよう。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。