オンライン・マーケティングの長年の経験から、YouTubeのコンテンツを追加することが、ブランドを宣伝する上でいかに効果的であるかを実感している。
適切なYouTube動画を選べば、見せることができる：
- 動画を宣伝し、再生回数、「いいね！」数、チャンネル登録者数を増やす
- 好意的なレビューや製品デモを表示し、売上を直接的に押し上げる
- SEOに効果的なウェブサイト滞在時間の延長
「私の経験では、ウェブサイトに動画を埋め込むことは、直帰率の低下とエンゲージメント指標の向上につながります。
- サム・ネルソン、デジタル広告とマーケティングのエキスパート
しかし最近では、インターネットユーザーの大半が携帯電話を利用しています。もしあなたの動画がモバイルデバイスで読み込めなければ、人々の関心を維持するのは難しくなるでしょう。
そこで、レスポンシブ動画の出番です。これらの動画は、スマホ、タブレット、パソコンなど、あらゆる画面サイズに合わせて自動的に調整されるため、誰もが快適に視聴できます。
この記事では、YouTubeの動画を埋め込む簡単な方法をご紹介します。
この記事で
レスポンシブYouTube動画を埋め込む方法
それでは、WordPressにYouTubeの動画を追加するすべての方法を見ていきましょう：
- 手動で：YouTube動画の埋め込みコードをコピーしてウェブサイトに貼り付け、手動でコードスニペットを編集して動画をレスポンシブ対応にする。
- 自動： WordPressプラグインが自動的に動画を取得し、サイトに追加します。
最初の方法はうまくいくが、いくつかの条件がある。まず、コード・スニペットの挿入や微調整に慣れている必要がある。
第二に、埋め込みコードを生成し、WordPressに微調整と追加を繰り返すために必要な時間と労力を費やす覚悟が必要です。
長期的に見れば、こうした問題は本当に大きな負担となる。さらに、サポートチームがいないことは、コードを挿入する際に何か問題が発生した場合に、大きな痛手となってしまう。
もっと簡単な方法は、優れたWordPressプラグインを手に入れ、そのプラグインに仕事を任せることだ。
市場にあるすべての選択肢の中で、私がYouTube Feed Proに決めた理由はいくつかある。
このツールを使えば、スマートフォンやタブレットからデスクトップまで、どんなデバイスでもYouTube動画が完璧に表示されることが保証されます。
使いやすさにも驚いた。ガイドされたフローに従うだけで、プラグインがYouTube動画フィードの作成、カスタマイズ、埋め込みのプロセスを案内してくれる。
以下は、YouTube Feed Proを使っていて気づいたいくつかのハイライトである：
- YouTubeチャンネル、プレイリスト、ライブストリームを様々なレイアウトで表示できます。
- ライブエディターで動画の見た目をカスタマイズ
- フィードを調整し、ウェブサイトに表示する動画をコントロールする
- たった3ステップで複数のYouTube動画をWordPressに追加できる
- 高度なYouTube検索クエリを使用してカスタムYouTubeフィードを作成する
- 動画をたくさん埋め込んでも、サイトが超高速で読み込まれるようにする
全体的には、かなり便利なツールで、コードを扱う頭痛の種から解放される。
このツールを試してみたい方は、こちらからYouTube Feed Proを始めることができる。
レスポンシブ動画を埋め込む最も簡単な方法
では、実際にこのプラグインを使って、あらゆる画面サイズで完璧に動作するYouTube動画を追加する方法を紹介しよう。
以下の手順に従ってください：
ステップ1：YouTube Feed Proをウェブサイトに追加する
まずはYouTube Feed Proプラグインを入手しよう。
ツールをダウンロードしたら、あなたのサイトにインストールしてください。
初心者のためのヒント：WordPressプラグインのインストール方法については、以下のステップバイステップの指示に従ってください。
ステップ2：プラグインを使ってYouTubeフィードを作成する
次に、WordPressのダッシュボードにあるYouTube Feed " All Feedsメニューをクリックします。
新規追加 オプションを選択し、YouTube動画の埋め込みを開始します。
このプラグインを使用すると、YouTube動画のソースを決定するさまざまなフィードタイプから選択することができます。
どのフィードタイプを選んでも、このプラグインは自動的に動画をレスポンシブ化するので、どんなデバイスや画面サイズでも美しく表示されます。
とはいえ、ここで紹介するのは、あなたが選べる6種類のフィードだ：
- チャンネル特定のYouTubeチャンネルからレスポンシブ動画を追加します。
- プレイリスト：選択したYouTubeプレイリストからの応答するビデオを表示します。
- 検索：特定の検索ワードやフレーズに基づいて、レスポンシブな YouTube 動画を表示します。
- ライブストリーム：今後予定されている、または既存のYouTubeライブストリームのレスポンシブビデオを追加します。
- 単一の動画：レスポンシブYouTube動画を個別に表示します。
フィードの種類を選び、「次へ」ボタンをクリックします。
この例ではYouTubeのプレイリストの動画を紹介するが、好きなオプションを選んでほしい。
ステップ3：新しいフィードをYouTubeに接続する
YouTubeフィードの種類を選ぶと、APIキーの入力を求めるポップアップが表示されます。
このキーは、基本的にあなたのウェブサイトをYouTubeと通信させ、動画を取得させる。
初心者向けヒント：まだAPIキーをお持ちでない場合は、YouTube APIキーの作成方法についてのチュートリアルをご覧ください。
APIキーを入手したら、それをポップアップに貼り付け、Addをクリックします。
APIキーを追加したら、動画のソースを入力することができます。
先ほど選んだフィードの種類にもよるが、YouTubeチャンネル、プレイリスト、検索ワードなどがこれにあたる。
先ほどはプレイリストを使ったので、例としてYouTubeのランダムなプレイリストをリンクしておこう。
ウェブブラウザでプレイリストを開き、このスクリーンショットのようにURLの最後にあるIDをコピーしてください：
その後、ウェブサイトに戻り、そのIDをポップアップに貼り付ける。
最後に「次へ」をクリックして、YouTube動画のソースの追加を完了する。
ステップ 4: レスポンシブYouTube動画フィードをカスタマイズする
その後、プラグインが動画を取得し、100％レスポンシブでサイトのデザインに合ったYouTubeフィードを作成します。
その上、このプラグインはユニークなデザインの異なるテンプレートから選ぶことができます。8つのオプションから選ぶことができます：
- デフォルト
- カルーセル
- カード
- リスト
- ギャラリー
- 最新ビデオ
- ショーケース・カルーセル
- ウィジェット
好みのデザインのフィード・テンプレートを選択し、「次へ」をクリックします。
一度にたくさんの動画を表示できるシンプルなフィードが欲しいので、デフォルトのテンプレートを使いました。
また、動画フィードの見え方をもっとコントロールしたい場合は、次にライブフィードエディタを使うことができる。
カスタマイズのほとんどはここで行われます。レイアウト、ヘッダー、ボタン、ビデオエレメント、その他もろもろを変更できます。
さらに、YouTubeフィードがさまざまなスクリーンでどのように見えるかをライブプレビューで見ることもできる。
上部のアイコンをクリックすると、携帯電話、タブレット、パソコンでビデオがどのように見えるかを見ることができる。
では、カスタマイズを始めよう。オプションがたくさんあるので、私がいつもやっているカスタマイズの手順を説明しよう。
では、左側のフィードレイアウトオプションをクリックしてみよう。
左のパネルには、4つのレイアウトオプションが表示されます：
- グリッド
- ギャラリー
- リスト
- カルーセル
動画を整然と並べたいですか？
それなら、グリッド・レイアウトを使えばいい。このレイアウトはこんな感じです：
しかし、ある特定のビデオに焦点を当てたい場合はどうするのか？
ギャラリーレイアウトでは、大きなビデオプレーヤーとその下に小さなサムネイルが表示されます。
ビデオにもっとスペースを与えたい？
リストレイアウトを使用し、ビデオを1列に表示することができます。
ウェブサイトをよりインタラクティブにするものをお探しなら、カルーセル・レイアウトがおすすめです。
あなたのウェブサイトでは、このように表示できます：
レスポンシブYouTubeフィードのレイアウトを選択し終わったら、「保存 」をクリックして確定します。
また、左側のパネルを使って、動画の数、行数、列数を変更することもできます。
それでは、左上のカスタマイズオプションをクリックして次に進みましょう。
レイアウトが決まったので、次は色を変えよう。
これは左の配色オプションから行うことができます。
シンプルにするために、4つの配色から選ぶことができる：
- テーマから継承： この便利なオプションは、YouTubeの動画フィードにテーマの色をコピーします。
- 明るい：クラシックな明るい配色で、背景はクリアな白、フォントはダーク。
- ダーク：こちらは反対で、暗い背景と白い文字色。
- カスタム：色を完全にコントロールするために、手動ですべての色を自分で選ぶことができます。
いつものように、好きなオプションを選んで「保存」をクリックする。
これでお分かりいただけたと思います。残りのオプションを使って、ヘッダー、ビデオ要素、ボタンなどを変更してください。
動画の下に購読バナーを表示し、視聴中に直接購読することもできます。
フィードのデザインに満足したら、「保存 」をクリックし、以下の最後のステップに進みます。
ステップ 5: レスポンシブ YouTube 動画フィードを埋め込む
このYouTubeフィードをウェブサイトに追加するには、2つの方法があります：
- ワードプレスのページ
- または、サイドバーやフッターなどのウィジェット対応エリアに設置する。
以下、両方のオプションについて説明しよう：
WordPressページにレスポンシブYouTube動画を埋め込む
時間を節約するために、ここから直接ビデオをページに追加することができます。
上部の埋め込み ボタンをクリックしてください。
そうすると、このYouTubeフィードを埋め込むことができるすべての方法がポップアップで表示されます。
場所を選ぶこともできるし、ショートコードをコピーしてサイトの任意の場所に手動で追加することもできる。
とりあえず、「ページに追加」オプションを使ってみよう。
ポップアップには、公開されているWordPressページのリストが表示されます。
レスポンシブYouTube動画を表示したいページを選び、「追加」をクリックします。
数秒待つだけで、プラグインがWordPressのエディターでページを開きます。
ここから、プラス（＋）アイコンを使って新しいブロックを追加しよう。
そうすると、ページに追加できるさまざまなWordPressブロックのパネルが表示されます。
検索バーで"youtube feed " を探し、YouTubeのフィードブロックをクリックします。
こうすることで、レスポンシブYouTube動画フィードがあなたのページにどのように埋め込まれるかのプレビューが自動的に表示されます。
レスポンシブ・ビデオをウェブサイト上でライブ配信するには、「更新」をクリックします。
これで、自分のウェブサイトを開いて、ビデオがどのように見えるかを見ることができます。私の例はこんな感じです：
WordPressのサイドバーまたはフッターにレスポンシブYouTube動画を埋め込む
レスポンシブ動画をサイドバーやフッターに埋め込みたい場合は、プラグインを使えばそれも可能です。
まず、ライブ・フィード・エディターをもう一度開く必要がある（万が一、閲覧してしまった場合に備えて）。
WordPressのダッシュボードから、次のページに移動します。 YouTubeフィード " すべてのフィード に移動し、埋め込みたいフィードをクリックします。
そうすると、すでにおなじみのライブフィードエディターが開く。
ここから、上部にある埋め込み ボタンをクリックして次に進みます。
今回は、ポップアップの「ウィジェットに追加」ボタンをクリックします。
数秒待つとYouTube Feed Proがあなたのサイトのウィジェットページを開きます。
このページから、フッターパネルまたはヘッダーパネルのいずれかを選択して、レスポンシブYouTube動画を表示することができます。
パネルの正確な数は、WordPressテーマによって異なります。
この例ではサイドバーパネルを選択しますが、お好きな場所を選んでください。
パネルを開いた後、ここでプラスアイコン(+) をクリックして新しいウィジェットを追加できます。
最後に、動画を埋め込むためにYouTubeウィジェットのフィードを選択します。
アップデート」をクリックして、新しいYouTubeフィードウィジェットを確認できます。
あなたのウェブサイトにアクセスすると、サイドバーエリアに埋め込まれたレスポンシブ動画を見ることができます：
それで終わりだ！
今すぐレスポンシブYouTube動画を埋め込む
私自身の経験から、YouTubeの動画がレスポンシブであることを確認することは、ウェブサイトのためにできる最も重要なことの1つです。
結局のところ、誰も自分のスクリーンサイズに適応しないビデオを見たくはないだろう？
このガイドでは、そのためにコードと格闘する必要はないことを示した。
Smash Balloon YouTube Feed Pro を使用することで、どのデバイスでもいつでも完璧な動画を表示することができます。
どうすれば始められるかは、以下の通りだ：
- YouTube Feed Pro を手に入れようを手に入れ、14日間無料でお試しください。
- ライブ フィード エディターを使用して、レスポンシブ動画フィードを簡単にカスタマイズし、ブランドのスタイルに完璧にマッチさせることができます。
- モバイルフレンドリーなYouTube動画フィードを、ページ、投稿、サイドバーウィジェットエリアにシームレスに埋め込むことができます。
レスポンシブYouTube動画の埋め込みについて、またはYouTube Feed Proを使い始めるにあたって、何かご質問がありますか？下のコメントでご質問ください。
Elementorのウェブサイトをお持ちですか？ElementorにYouTubeチャンネルを埋め込む方法をご紹介します。
その他のYouTubeマーケティングガイドとチュートリアル
- 無料でYouTube動画を宣伝する方法（専門家のアドバイス）
- 今すぐ購読者を増やすためのベストYouTubeプラグイン
- 顔を見せずにYouTubeで稼ぐ方法
- あなたのYouTubeショートフィルムが再生回数を稼げない理由［＋対処法］
- YouTube Shorts vs TikTok：あなたに最適なのはどちら？
