ウェブサイトにYouTubeのプレイリストを埋め込む4つの方法(2025年)
クリック・ソーシャル

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

無料トライアル開始 アングルライト
ホーム ブログ ウェブサイトにYouTubeのプレイリストを埋め込む4つの方法(2025年)

ウェブサイトにYouTubeのプレイリストを埋め込む4つの方法(2025年)

YouTubeプレイリストをウェブサイトに埋め込む方法

YouTubeのプレイリストをウェブサイトに埋め込みたいですか?

LinkedInやTwitterのような他のソーシャルプラットフォームとは異なり、YouTubeはビデオコンテンツ専用に作られました。そのため、訪問者を惹きつける魅力的な動画を探すには、YouTubeが最適です。

しかし、WordPressにYouTubeのプレイリストを埋め込むのは、特に技術に精通していない場合、混乱する可能性があります。

この記事では、サムネイル付きのYouTubeプレイリストギャラリーをWordPressに埋め込む方法を、最も簡単な方法を含めて4つご紹介します!

以下は、さまざまな方法の概要です。どのオプションをクリックしても、必要なセクションに直接ジャンプできます:

なぜWordPressにYouTubeプレイリストを埋め込むのか?

プレイリストのYouTubeギャラリーをWordPressサイトに追加することで、手間をかけずに新鮮なビデオコンテンツを更新することができます。

「62%の消費者がブランド・ビデオをリサーチに利用しており、ビデオは意思決定に欠かせないものとなっている。89%の消費者が、2024年にはブランドからもっと多くの動画を見たいと考えている。"

Wyzowl、動画マーケティング統計 2024年

また、訪問者にYouTubeの登録者になってもらうのに最適な方法です。

動画のプレイリストをWordPressに手動で追加する代わりに、YouTubeにアップロードすれば、YouTubeのプレイリストに新しい動画をアップロードするたびにウェブサイトに表示されます。

ウェブサイトに埋め込んだYoutubeプレイリストの例

これは、ソーシャルメディア・フィードを使って新規顧客を確保するための貴重な社会的証拠を提供する、製品を使用している人々のビデオを強調する素晴らしい方法です。

動画コンテンツを使えば、ウェブサイト訪問者のユーザーエンゲージメントを高め、サイトに長く滞在してもらうこともできる。

最後に、顧客の声ビデオをお持ちの場合は、これらのビデオをプレイリストとしてグループ化し、YouTubeのプレイリストをあなたのウェブサイトの販売ページに埋め込むことで、あなたのビジネスの販売を促進することができます。

YouTubeのプレイリストのURLを取得するには?

埋め込みたいYouTubeプレイリストのURLを取得するのは超簡単です。まず、サムネイル付きのYouTubeプレイリストをWordPressに埋め込む前に、それを見つける必要があります。結局のところ、この記事で取り上げたいくつかの方法は、埋め込みを機能させるためにプレイリストのURLを必要とします。

YouTubeプレイリストへのリンクを作成するには、https://www.youtube.com/、埋め込みたいプレイリストを開きます。

そして、ブラウザのアドレスバーの一番上にあるURLを見つけることができる。

URLで"?list="を探し、それ以降をすべてコピーする。

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

YouTubeのユニークなプレイリストURLをコピーしたら、後で使えるようにメモ帳や文書に保存しておこう。

YouTube動画のプレイリストURLを取得したところで、WordPressウェブサイトに埋め込むさまざまな方法を見てみましょう。

まずは最も簡単でベストなYouTubeプレイリスト埋め込みオプションから。

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

YouTubeのプレイリストをWordPressサイトに埋め込む最も簡単な方法は、WordPressのYouTubeプラグインを使うことです。

YouTube Feed ProのようなWordPressプラグインは、サイトの機能を拡張し、YouTubeのプレイリストを簡単に表示することができます。

YouTube Feed Proのようなソリューションを使えば、HMTLもJavascriptも不要で、YouTubeのプレイリストの動画をわずか数分で埋め込むことができます!

youtubeフィードプロプラグインスマッシュバルーン

このプラグインには、YouTubeとWordPressの統合をかつてないほど簡単にする便利な機能がたくさん搭載されています:

  • 数回のクリックで、YouTubeプレイリストのフィードを作成、カスタマイズし、WordPressに埋め込む方法をガイド付きフローに従って行うことができます。
  • プレイリストに加え、YouTubeチャンネル、ライブストリーム、YouTube単体動画、YouTubeショートムービー、特定の検索結果の動画などを埋め込むことができる。
  • また、YouTube Feed Proを使用している場合は、YouTubeプレイリストフィードがすぐにレスポンシブになり、モバイルユーザーにも完璧に読み込まれます!
  • また、YouTube Feed Proにはライブフィードカスタマイザーがあり、数回のクリックでYouTubeフィードのデザインを完全にコントロールすることができます。

Smash Balloonのプラグインは、世界最大級のブランドから信頼を得ています。

ご覧の通り、これらのプラグインを使えば、WixやSquarespaceのような高価なプラットフォームは必要なく、WordPressで人気のウェブサイトを作ることができる。

スマッシュバルーン使用ブランド

そして一番の特徴は?他のYouTubeフィード・プラグインと違い、YouTube Feed Proは自動再生をしません。

このプラグインのYouTubeプレーヤーは、訪問者があなたのプレイリストに関与した後にのみビデオ再生を開始します。これにより、ページ速度とウェブサイトでのユーザー体験が向上します。

その結果、サイトがより高速になり、SEOも向上して、検索エンジンの検索結果で上位に表示されるようになります。

専門家のアドバイス:Diviウェブサイトをお持ちですか?YouTubeプレイリストのフィードをDiviに埋め込む方法について、ステップバイステップのチュートリアルをご紹介します。

YouTubeのプレイリストを埋め込む方法のビデオチュートリアル

文章で説明を読みたいですか?それでは、YouTubeプレイリストの動画をWordPressウェブサイトに表示する方法をご覧ください。

ステップ1:YouTube Feed Pro プラグインをダウンロードしてインストールする

まずはYouTube Feed Proプラグインをダウンロードしてください。

プラグインを入手したら、ウェブサイトにインストールして有効化する。

詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

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

このプラグインを使ってYouTubeフィードを作成するには、ガイドされたフローに従うだけでよい。

まず、WordPressのダッシュボードからYouTube Feed " All Feedsに 移動し、Add New ボタンをクリックします。

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

次に、プラグインがYouTubeフィードの種類を尋ねます。以下は、あなたが選ぶことができるオプションです:

  • チャンネル 特定のチャンネルからすべてのYouTube動画を埋め込む
  • プレイリスト 選択したYouTubeプレイリストの動画を表示する
  • 検索 選択した用語の検索結果からYouTube動画を埋め込む
  • ライブストリーム: ウェブサイトにチャンネルからのライブストリームを表示する
  • 単一のビデオ: 個々の動画を選んでウェブサイトに埋め込む

YouTubeのプレイリストを埋め込むので、リストからプレイリストオプションを選択し、「次へ」をクリックします。

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

YouTubeフィードのソースを追加して、ウェブサイトに動画を表示できるようになりました。

そのためには、YouTube API Keyを プラグインに追加するだけです。

YouTubeのAPIキーを作成するためのドキュメントをご用意しました。手順に従って、最後にAPIキーをコピーして ください。

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

youtubeにapiキーを追加

その後、サイトに表示したいYouTubeプレイリストを選択します。

チュートリアルの最初に保存したプレイリストIDを、ここのポップアップにペーストしてください。

最後に「Next」をクリックして続行する。

プレイリストIDをYoutubeフィードに追加

ステップ4:YouTubeプレイリストをカスタマイズする

デフォルトでは、YouTubeフィードは自動的にあなたのウェブサイトのデザインを継承し、箱から出してすぐに素晴らしい外観になります。

その上、YouTube Feed Proはフィードのデザインもコントロールできるので、どのように見えるかを自由に選ぶことができる。

まずは、8種類のフィードテンプレートからお好きなものをお選びください:

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

続行するには、お好みのテンプレートを選択し、[Next]ボタンをクリックします。

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

さらに詳細なカスタマイズオプションが必要ですか?YouTube Feed Proには、YouTubeフィードのデザインを自由に変更できるライブフィードエディタも付属しています。

エディターの左側には、フィードのレイアウト、カラースキーム、ヘッダーデザインなどを変更するオプションが表示されます。

右側には、YouTubeフィードのリアルタイムプレビューが表示されます。

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

始めるには、左側のフィードレイアウトオプションをクリックします。

こうすることで、YouTubeプレイリストのフィードをあなたのサイトに最適なレイアウトで表示することができます。

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

YouTubeフィードのレイアウトを4種類から選べるようになりました:グリッド、ギャラリー、リストカルーセルです。

YouTubeフィードで試したいレイアウトを選ぶだけ。

フィードレイアウト

例えば、グリッドレイアウトをクリックすると、YouTubeのコンテンツがグリッド状に整然と並べられます。その結果、一度に大量の動画を埋め込むことができます。

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

また、YouTubeギャラリーオプションを選択すると、最初の動画をフィードの上部にフルワイドで表示し、その下に小さなサムネイルをグリッドで表示することができます。

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

次に、YouTubeプレイリストのフィードを1列に表示するリスト・レイアウトです。その結果、各動画に多くのスペースが確保されます。

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

最後に、カルーセルレイアウトを選択し、YouTubeのプレイリスト動画に美しいスライドショーのカルーセルを表示することもできます。

Youtubeフィードプロ用カルーセルレイアウト

レイアウトを選んだら、Saveボタンをクリックします。

YouTubeプレイリストフィードの残りの部分をカスタマイズすることができます。そのためには、まずエディタの上部にある小さなカスタマイズボタンをクリックします。

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

ここから、左のパネルを使って残りのカスタマイズオプションを見つけることができます。

続行するには、Color Schemes オプションをクリックします。

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

ここでは、4つのカラースキームから選択して、YouTubeプレイリストフィードの色を即座に変更することができます:

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

オプションからフィードの配色を選択し、もう一度保存をクリックします。

残りのカスタマイズオプションを使って、YouTubeフィードの見た目を変更できます。ヘッダーのデザイン、フィードのサイズ、より多くのボタンをロードする、ソース、その他多くのことを設定できます。

選んだフィードのデザインに満足したら、もう一度「変更を保存」をクリックします。

ステップ5:WordPressページにYouTubeプレイリストを埋め込む

次のステップは、YouTubeフィードをWordPressのウェブページに追加することです。そのためには、ライブフィードエディターを使えばいい。

まず、右上の埋め込み ボタンをクリックします。

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

このポップアップから、ウェブページやウィジェットエリアにフィードを埋め込むか、ショートコードをコピーするかを選択できる。

とりあえず、このYouTubeプレイリストフィードをあなたのウェブサイトのWordPressページに埋め込むには、「ページに追加」をクリックしてください。

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

次に、ウェブサイトの全ページのリストが表示されます。

ここでページを選択し、下の追加 ボタンをクリックしてください。

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

WordPressのエディタでそのページを開き、フィードを埋め込むことができます。ここで、プラス (+) シンボルをクリックして、新しい WordPress ブロックを追加します。

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

次に、 "youtube feed "を検索し、YouTubeのフィードブロックを選択して、YouTubeのビデオフィードをこのページに埋め込みます。

YouTubeのプレイリストは、先ほど選択したレイアウトとボタンオプションで即座にページに追加されます。

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

2.WordPressのサイドバーまたはフッターにYouTubeプレイリストを埋め込む

この方法では、WordPressウェブサイトのサイドバーまたはフッターのウィジェットエリアにYouTubeプレイリストウィジェットを追加します。

WordPressの管理パネルから、YouTube Feed " All Feedsに移動し、ウェブサイトで利用可能なすべてのYouTubeフィードを表示します。

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

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

前回同様、右上にある埋め込み ボタンをクリックして開始する。

Youtubeフィードを埋め込む

サイドバーやフッターのウィジェットにYouTubeプレイリストを埋め込むには、ポップアップで「ウィジェットに追加」をクリックします。

ウィジェットに追加する

ウィジェットページが 開き、WordPressのすべてのウィジェットを追加、削除、管理できます。

YouTubeプレイリストをサイドバーウィジェットに埋め込みたいですか?サイドバーパネルを クリックしてください。

サイドバーパネルを開く

プレイリストをフッターに表示したい場合は、フッターパネルを 選択することもできます。

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

フッターパネルを開く

そこから、プラスアイコン(+)をクリックして新しいウィジェットを追加し、YouTube ウィジェットのフィード オプションを選択します。

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

設定を保持するには、忘れずに「更新 」をクリックしてください。

その後、あなたのウェブサイトに移動し、この例のように埋め込まれたYouTubeのプレイリストをチェックすることができます。

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

3.oEmbedsでYouTubeプレイリストを埋め込む

WordPressプラグインのカスタマイズオプションや使いやすさを利用したくないですか?

プレイリストから動画を埋め込む方法は他にもあります。

ただ、フォローが難しくなり、カスタマイズが複雑になるだけだ。それに、一流のカスタマーサポートを受けることもできない。

WordPressでプレイリストのごく基本的なバージョンを追加するには、プレイリストのURLをコピーし、ページまたは投稿エディターに直接貼り付けます。

Youtubeプレイリストの例

WordPressはYouTubeからプレイリストを取得し、oEmbedと呼ばれる技術を使って自動的に投稿に表示します。

Youtubeプレイリストの例

その結果、1つのビデオに、クリックするとプレイリスト内の他のビデオを表示するメニューが表示される。

YouTubeプレイリストの見た目をカスタマイズしたい?

この方法では、手作業でコード・スニペットを微調整するか、高価な開発者を雇う必要がある。

そのため、HTMLコードやカスタムCSS、その他のコーディング言語に精通していないWordPress初心者の方には、最適な選択肢とは言えません。

また、ソーシャルメディアマーケティングの予算が限られている場合にも向かない。

4. Embed a YouTube Playlist Using <iframe>

最後に、iFrame埋め込みコードを使ってWordPressにYouTubeプレイリストを埋め込む方法を見てみましょう。

これを行うには、以下のように、プレイリストのYouTubeページに移動し、共有 ボタンをクリックします:

シェアボタン youtube

すると、YouTubeのプレイリストを様々なプラットフォームで共有するためのポップアップが表示されます。

続行するには、ライトボックスのポップアップから埋め込みオプションを選択します。

埋め込みボタンをクリックしてください。

動画とあなたの動画埋め込みコードを含むライトボックスポップアップが画面に表示されます。

src、videoseries、allowfullscreen、frameborderを含むすべてのコードをハイライトし、クリップボードにコピーする。

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

次に、WordPressで投稿またはページに移動し、プラス(+)記号を クリックして新しいコンテンツブロックを追加します。

グーテンベルグ・ブロックの追加

検索バーを使って「カスタムHTML」ブロックを探し、下の「カスタムHTML」ブロックをクリックします。

カスタムhtmlブロックの追加

ブロック内に、YouTubeからコピーしたiFrame埋め込みコードを貼り付け 、プレイリストを埋め込みます。

ページをプレビューすると、前の方法と同じような形式でプレイリストが表示されます。

Youtubeプレイリストの例

ご覧の通り、この方法でYouTubeのプレイリストを埋め込むと、訪問者はすべての動画をチェックすることができません。

そうだ!

この記事で、YouTubeのプレイリストをWordPressで簡単に表示する方法がわかりました。ご覧の通り、YouTubeプレイリストフィードでできることはたくさんあります。

YouTube Feed Proを使えば、YouTubeのプレイリストをあなたのウェブサイトに簡単にアップすることができます。

YouTubeプレイリストを埋め込む準備はできましたか?今すぐYouTube Feed Proをご利用ください!

ElementorでYouTubeのプレイリストを埋め込む方法については、こちらのチュートリアルもご覧ください。

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

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。