DiviウェブサイトにYouTube動画を埋め込み、デザインを崩さずに表示する最も簡単な方法をお探しですか？
初めてDiviサイトにYouTube動画を手動で追加しようとした時のことを覚えています。
何時間もiFrameコードと格闘したのに、モバイル端末では美しいページデザインが台無しになってしまった。
動画の読み込みが遅く、私のブランドイメージに合わず、正直言って別のサイトから適当に貼り付けたように見えた。
実は、DiviサイトにYouTubeコンテンツを追加する、もっと優れた方法があるんです。しかも、まったくコーディングの知識が不要です。
このチュートリアルでは、Smash BalloonのYouTube Feed Proを使用して、DiviウェブサイトにYouTube動画をシームレスに埋め込む方法をご紹介します。
信じてください、この方法は手動埋め込みよりも簡単であるだけでなく、より速く、よりプロフェッショナルな仕上がりになります。
この記事で
手動 vs. 自動：DiviにYouTube動画を追加する最適な方法は？
チュートリアルに入る前に、YouTube Feed Proのような専用プラグインを使うことが従来の手動方式よりも優れている理由について説明しましょう。
多くの人がWordPressにYouTube動画を追加しようと考えるとき、YouTubeから埋め込みコードを取得してページに貼り付ける。
技術的には機能しますが、特にDiviのような視覚的に洗練されたプラットフォームでは深刻な問題を引き起こします。
両方の方法の比較は以下の通りです：
| 特徴 | スマッシュ・バルーン YouTubeフィード・プロ | 手動iFrame埋め込み |
| コーディング不要 | ✅ 完全なビジュアルカスタマイザー | ❌ HTML/CSSの知識が必要です |
| 自動更新 | ✅ 動画はリアルタイムで更新されます | ❌ 各埋め込みを手動で更新する必要があります |
| モバイル対応 | ✅ 組み込みのレスポンシブ設定 | ❌ カスタムCSSが必要です |
| ページ読み込み速度 | ✅ スマートローディング（2～3秒高速化） | ❌ 重いスクリプトがすぐに読み込まれる |
| デザインの一貫性 | ✅ Diviテーマのスタイルを継承します | ❌ 汎用的なYouTubeプレイヤーのデザイン |
| サポートとアップデート | ✅ 専任チーム + 自動互換性 | ❌ 自分で何とかしろ |
| テイクアウト | YouTube Feed Proは、DiviサイトでYouTube動画を表示する最も迅速な方法です。 | 手動での更新が必要であり、高度なコーディング知識が求められます |
YouTube Feed ProをDiviと併用する素晴らしい点は、テーマのデザインに自動的に適応することです。
あなたの動画は、あたかも最初からサイトの一部であるかのように見えます。どこかから無理やり貼り付けたような不自然な印象は一切ありません。
DiviテーマにYouTube動画を埋め込む最も簡単な方法
YouTubeの動画を簡単にウェブサイトに表示したい場合は、YouTubeフィードプラグインを使用するだけです。
そして、あなたが試すことができる市場で最高のオプションは、Smash BalloonのYouTube Feed Proプラグインです。
YouTube Feed Proを使えば、YouTubeフィードの作成、カスタマイズ、ウェブサイトへの埋め込みがこれまで以上に簡単になります。
YouTube Feed Proプラグインの主な機能：
- 3ステップのガイド付きフローに従うだけで、わずか数クリックで全プロセスを完了できます。HTMLやCSS、埋め込みコードは一切不要です。
- YouTube Feed Proでは、YouTubeチャンネル、プレイリスト、ライブ配信、単体のYouTube動画などを埋め込むことができます。
- このプラグインはスマートローディング機能も備えており、訪問者がクリックした時のみ読み込みます。これによりYouTubeフィードの読み込みが高速化され、サイトのSEO効果が向上します。
- また、レイアウトや配色、ヘッダースタイル、ボタンデザインなどを変更できるライブフィードエディタも利用できます。
全体として、これは市場で最高のYouTubeフィードプラグインであり、あなたのDiviウェブサイトをより魅力的にするための素晴らしい方法です。
YouTubeフィードを埋め込む準備はできましたか？YouTube Feed Pro プラグインを今すぐご利用ください。
それでは、このプラグインを使ってDiviのテーマにYouTubeの動画を埋め込む方法を見ていこう。
DiviテーマでYouTube動画を追加する方法（ステップバイステップ）
それでは、Smash Balloonを使用してDiviウェブサイトにYouTube動画を追加する方法を、順を追ってご説明します。
私はこの手法を数十のクライアントサイトで実際に使用してきましたが、毎回見事に効果を発揮しています。
ステップ1: YouTube Feed Proをインストールして有効化する
まずは、YouTube Feed Proプラグインをこちらから入手してください。次に、あなたのサイトにプラグインをインストールして有効化するだけです。
やり方がわからない場合は、WordPressプラグインのインストール方法に関するこちらのガイドに従ってください。
ステップ2：YouTubeフィードを作成する
さて、いよいよ楽しい部分です：実際に動画フィードを作成しましょう！
YouTubeの動画をウェブサイトに表示するには、まずこのプラグインを使ってYouTubeフィードを作成します。
そのためには、WordPressダッシュボードからYouTubeフィード " すべてのフィードメニューに移動し、新規追加をクリックします。
その後、あなたのウェブサイトに必要なYouTubeビデオの種類を選択することができます。ここでは、6つの異なるオプションから選択することができます：
- チャンネル: 選択したチャンネルのYouTube動画を表示する
- プレイリスト：YouTubeプレイリストを埋め込み、訪問者の関心を引く
- 検索: YouTubeの検索結果をDiviウェブサイトに追加する
- ライブストリーム：フィードを使用してYouTubeライブストリームを埋め込みます
- 単体動画：選択したYouTube動画をDiviページまたは投稿に埋め込み
続行するには、フィードの種類を選択し、[次へ]をクリックします。
この例では、プレイリストフィードタイプを使います。
ステップ3：YouTubeアカウントに接続する
YouTubeアカウントと接続することで、このフィードはYouTubeから動画を取得し、Diviに埋め込むことができる。
そして、YouTubeアカウントを接続する最も簡単な方法は、APIキーを追加することです。
注：APIキーを使用すると、ウェブサイトをYouTubeに接続できます。これにより、YouTube Feed Proなどのプラグインが動画を取得して表示できるようになります。
まだYouTube APIキーをお持ちでないですか？このステップバイステップのガイドに従ってYouTube APIキーを作成することができます。
その後、APIキーをポップアップに貼り付け、Addボタンをクリックする。
YouTubeフィードのソースを選択できます。選んだフィードの種類によって、YouTubeチャンネル、プレイリスト、検索ワードなどがあります。
この例では、DiviのYoutubeプレイリストを埋め込みます。
そのためには、ウェブブラウザでYouTubeのプレイリストを開き、上部にあるURLを探してください。
URLから、末尾のIDをコピーするだけです。
もう一度WordPressサイトを開き、ソースの追加を完了する。
最後に、コードをプレイリストID フィールドに貼り付け、「次へ」をクリックする。
ステップ4：YouTubeフィードをカスタマイズする
YouTube Feed Pro プラグインを使用すると、フィードは自動的にあなたのウェブサイトのデザインを継承します。
さらに、フィード用にインポートするテンプレートも選択できます。これにより、Diviサイト上で動画が表示される基本的なレイアウトが決まります。
YouTube Feed Proは、いくつかの美しいテンプレートを提供しています：
- デフォルト
- カルーセル
- カード
- リスト
- ギャラリー
- 最新ビデオ
- ショーケース・カルーセル
- ウィジェット
私の経験上、CardsテンプレートはDiviのカラム構造と非常に相性が良く、ほとんどのサイトでおすすめしています。続けて、お好みのテンプレートを選択し、「次へ」をクリックしてください。
YouTubeフィードを詳細にカスタマイズするために、YouTube Feed Proはライブフィードエディタに送ります。
YouTube Feed Proの真価が発揮されるのはここです。ビジュアルフィードカスタマイザーを使えば、コーディング一切不要でライブプレビューを見ながら動画フィードをデザインできます。
左側にはカスタマイズパネルがあり、フィードのレイアウト、カラースキーム、YouTube登録ボタン、ヘッダーデザイン、さらに読み込みボタンなど、さまざまな設定が可能です。
何か変更を加えると、右側のライブプレビューでYouTubeフィードがリアルタイムでどのように見えるかが表示されます。
カスタマイズを開始するには、左側のフィードレイアウトオプションをクリックします。
そうすると、YouTube Feed Proは、グリッド、ギャラリー、リスト、カルーセルの4つからレイアウトを選ぶように指示します。
以下、それぞれのレイアウトを見てみよう。
グリッドレイアウトを 使えば、YouTubeの動画をシンプルな行と列で均一なサムネイルで表示することができます。
その結果、Diviで大量のYouTube動画を簡単に表示することができる。
次に、フィードをYouTubeのギャラリーに見立て、上部に大きな動画、下部に小さなサムネイルを表示するギャラリーレイアウトがある。
このように、YouTubeの1つの動画に焦点を当てることができる。
次に、YouTubeの動画コンテンツを1列に表示できるリストレイアウト です。
そうすることで、動画フィードは非常に見やすくなり、ウェブサイト上でより多くのスペースを取ることができます。
YouTubeの動画をスライドショーで表示したいですか？それなら、ここでカルーセルレイアウトを 選ぶことができます。
これにより、あなたのウェブサイトは訪問者にとってさらにインタラクティブになります。
フィードのレイアウトを選択したら、「保存」ボタンをクリックして次に進みます。
最後に、カスタマイズ ボタンをクリックして、YouTubeフィードのデザインの編集を続けます。
Diviテーマのスタイル設定を継承する
私のお気に入りの機能の一つをご紹介します：Smash Balloon YouTube Feed Proは、Diviテーマの色、フォント、スタイルを自動的に継承できます。
[カスタマイズ]タブで、[カラースキーム]セクションを探してください。
YouTube Feed Proには4つのカラースキームが付属しており、フィードの全色を簡単に変更できます。
- テーマから継承： Divi WordPressテーマの色をコピーする
- 明るい：暗いフォントで明るい背景を表示する
- Dark：暗い背景に明るいフォントを埋め込みます。
- カスタム：手動ですべての色を選ぶ
「テーマから継承」というオプションが表示されます。
このオプションを有効にすると、プラグインはアクティブなDiviテーマをスキャンし、主要なフォント、ボタンスタイル、カラーパレットを動画フィードに適用します。
これは、YouTube動画がウェブサイトのデザインに自然に溶け込み、外部要素のように見えないことを意味します。
信じてください、この機能だけでも入場料の価値は十分にあります。
以前は開発者の友人に何時間も頼んで、埋め込み動画がDiviサイトに合うようにカスタムCSSを書いてもらっていました。今ではそれが自動的に行われます。
最終的に配色を選択したら、「保存」をクリックして変更を確定します。
残りのカスタマイズオプションを使って、ヘッダーデザイン、ボタンスタイル、ライトボックスオプション、フィードサイズなどを設定できます。
主なカスタマイズオプションを見ていきましょう：
フィードレイアウト設定：
- 列– 1行に表示する動画の数を選択（デスクトップは3、タブレットは2、モバイルは1が推奨）
- 投稿数– 初期に読み込む動画の数を決定する
- さらに読み込むボタン– これを有効にすると、訪問者がページを離れることなく追加の動画をロードできるようになります
ヘッダー設定：
- ヘッダーを表示– チャンネル名、登録者数、チャンネルアバターを表示するには、これをオンに切り替えてください
- ヘッダースタイル– 「ビジュアル」（チャンネルアートを表示）または「テキストのみ」から選択
視覚的なヘッダーを追加するのが大好きです。信頼を築くからです。サイト訪問者は登録者数を確認でき、チャンネルが正当であることを確かめられます。
カスタマイズが完了したら、「保存」をクリックします。
ステップ5：YouTube動画フィードをDiviウェブサイトに埋め込む
いよいよ、あなたの素敵なYouTubeフィードをDiviページに実際に追加する時が来ました！このプラグインを使えば、ライブフィードエディターから直接YouTubeフィードを埋め込み始められます。
まずは、上部の埋め込み ボタンをクリックしてください。
次に、YouTubeフィードのすべての動画埋め込みオプションを含むポップアップが表示されます。ここから、ページ、投稿、サイドバー、フッターにフィードを埋め込むことができます。
ここで、コピーボタンをクリックして続行してください。すぐに必要になります。
WordPressのページにフィードを埋め込むには、ダッシュボードからページ " 新規追加 メニューを開きます。
ページエディターから、「Divi Builderを使用」 ボタンをクリックします。
代わりにWordPressの投稿を使いたいですか？その場合は新しい投稿を作成し、以下の手順を続けてください。
その後、3つのオプションから選択して、Diviのページや投稿のデザインを開始できます：
- ビルド開始空白のテンプレートから始める
- レイアウトを見る： 構築済みのレイアウトをインポート
- ページを選ぶ：ページを選択し、そのデザインをコピーする
続行するには、お好みのオプションを選択してください。
Start Buildingオプションを使えば、すぐにページや投稿のデザインを始めることができます。
レイアウトを参照」オプションを選択した場合は、「ライブラリから読み込む」 ポップアップで既存のレイアウトを参照できます。
ポップアップで、お好みのレイアウトをクリックしてください。
レイアウトの詳細が表示されます。
ページや投稿にこのレイアウトを選択するには、「このレイアウトを使用」をクリックします。
Choose Page オプションを選ぶと、Diviを使って作成したすべてのページデザインがポップアップで表示されます。
続行するには、このポップアップにある既成レイアウトのいずれかをクリックするだけです、
これで、YouTube動画をDiviページビルダーに追加することができる。
まず、緑色のプラスアイコン（+）をクリックして、YouTubeフィードを配置するための新しい行を作成します。
その後、追加したい行のタイプを選ぶことができる。
次に、プラス（+）アイコンをクリックして、モジュールの挿入 ポップアップを開きます。これを使用して、Diviテーマにコンテンツを追加できます。
上部の検索バーで、「code」 モジュールを探します。その後、下の結果からCodeモジュールをクリックしてください。
重要な点：フィードを正しく埋め込むには、Diviのコードモジュールを使用する必要があります。テキストモジュールやビデオモジュールは使用しないでください。コードモジュールを使用することで、Diviが不要な書式を追加してショートコードを壊すのを防げます。
そうしたら、左側のコードフィールドを探し、YouTubeフィードのショートコードを貼り付ける。
最後に、一番下のチェックアイコンを クリックして変更を保存します。
これで、Divi WordPressサイトにYouTube動画が追加されました。あとはPublishをクリックすれば、フィードがあなたのサイトで公開されます。
訪問者にどのように見えるかは、あなたのページや投稿を開いて見てください。
それで終わりだ！
DiviテーマでYouTube動画を追加する方法はお分かりいただけただろう。DiviテーマでYouTube動画を追加すれば、ウェブサイト訪問者の関心を引きつけ、顧客へと転換させることができる。
YouTube Feed Proプラグインを使えば、数回クリックするだけで、YouTubeの動画をDiviのウェブサイトに埋め込むことができます。
WordPress DiviにYouTube動画を埋め込む準備はできましたか？今すぐSmash Balloon YouTube Feed Proを入手しましょう！
なぜDiviにYouTube動画を埋め込むのか？
さて、ここで疑問に思うかもしれません：「よし、動画の埋め込み方法はわかったけど、なぜそうすべきなんだろう？」
素晴らしい質問ですね！私の経験とデータに基づいた、説得力のある理由をいくつかお伝えしましょう。
Diviテーマを使用すれば、ビジュアルビルダーの助けを借りて簡単に美しいウェブサイトを作成できます。Diviサイトが完成したら、動画コンテンツを活用してエンゲージメントを高めましょう。
DiviでYouTubeフィードを表示することで、関連する動画コンテンツを提示し、訪問者をサイト内に留めることができます。
これはほんの始まりに過ぎません！YouTubeのDiviフィードがあなたのウェブサイトに役立つ、もっとすごい方法をいくつかご紹介しましょう：
コンバージョンにつながる社会的証明
動画コンテンツは、ウェブサイト上で活用できる最も強力な社会的証明の形態の一つです。
潜在顧客があなたのYouTube動画を見たとき、それがチュートリアル、お客様の声、製品デモ、あるいは舞台裏コンテンツのいずれであっても、テキストでは到底及ばない方法で信頼を築くことができます。
実際、消費者の84％がブランドの動画を見た後で購入を決意したと回答しています。これは非常に大きなコンバージョンへの影響力です！
YouTubeフィードをDiviサイトに直接埋め込むことで、訪問者はサイトから離れることなく、この説得力のあるコンテンツに即座にアクセスできるようになります。
サイト滞在時間とエンゲージメントの向上
興味深い事実があります：動画コンテンツを含むページは、テキストのみのページに比べて訪問者の滞在時間を大幅に長く保ちます。
誰かがあなたのサイトに埋め込まれたYouTube動画の再生ボタンをクリックすると、その人はあなたのサイトで数分間（あるいはそれ以上）を過ごすことを約束していることになります。
この増加した「サイト滞在時間」指標は、コンテンツの質についてGoogleに好印象を与え、SEOや検索順位を向上させる可能性があります。
さらに、YouTube FeedProのライトボックス機能により、動画はサイト上にオーバーレイ表示で再生されます。訪問者はYouTubeにリダイレクトされることなく、あなたのページに留まります。これにより、訪問者をコンバージョンファネル内に留めることができます。
コンテンツを自動的に新鮮に保つ
Diviウェブサイトの維持における課題の一つは、コンテンツの更新を継続することです。YouTube Feed Proを使えば、チャンネルに新しい動画を公開するたびに、ビデオフィードが自動的に更新されます。
WordPressにログインして手動で新しい動画埋め込みを追加する必要はもうありません。Diviサイトは、あなたの努力なしに常に最新のコンテンツを表示します。
このように、Diviに動画を埋め込むことで、ソーシャルメディアでの存在感を高め、訪問者の関心を引き、ビジネスを成長させることができます。
今すぐDiviサイトにYouTube動画を埋め込み始めましょう
以上です！これで、Smash BalloonのYouTube Feed Proを使って、Divi WordPressサイトにYouTube動画を埋め込む方法を完全に理解できましたね。
コーディング不要。デザインに悩む必要もありません。美しく、高速で読み込み、SEO対策済みの動画フィードが自動更新され、訪問者を顧客へと変えます。
最高なのは？
セットアップ全体は15分もかかりませんが、その効果はウェブサイトが存在する限り持続します。
Diviサイトで動画コンテンツを本格的に公開したいなら、マーケティング、教育、エンターテインメント、ソーシャルプルーフを問わず、YouTube Feed Proが間違いなく最も簡単でプロフェッショナルなソリューションです。
見事なYouTube動画フィードでDiviサイトを変革する準備はできていますか？
今すぐYouTube Feed Proを始めよう 今すぐ始めれば、エンゲージメントが急上昇！
参考になるかもしれない関連記事：
- DiviウェブサイトでInstagramフィードを表示する方法（コーディング不要）
- Diviのウェブサイトにソーシャル・メディア・フィードを追加する方法（＋スクリーンショット!）
- DiviのウェブサイトにYouTubeのショートムービーを埋め込む方法
