今すぐWordPressにYouTube動画を追加する方法(最も簡単な方法)
ホーム ブログ YouTubeの動画をウェブサイトに埋め込む方法

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

Youtube動画を埋め込む

YouTubeの動画をウェブサイトに埋め込む方法を知りたいですか?

YouTubeの動画を見せることは、訪問者の興味を引きつけ、新規顧客へと転換させる素晴らしい方法です。

しかし、YouTubeの動画を手動で表示するのは大変だ。特に、動画の長さを明確に表示したい場合は。

解決策は?WordPressのウェブサイトにYouTubeの動画を埋め込む簡単な方法を、長さや再生時間とともにご紹介します。

始めよう!

YouTube動画をウェブサイトに埋め込む最も簡単な方法

YouTubeのコンテンツを埋め込むには、2つの方法があります:

  • 手動による方法: YouTube動画の埋め込みコードを生成し、コードを微調整してからWordPressサイトに追加します。
  • 自動的な方法: YouTubeのWordPressプラグインを使用すると、わずか数クリックでYouTubeの動画をウェブサイトに自動的に追加できます。

手作業で動画を埋め込むと、手動でサイトにコードを挿入することになるため、結局多くの時間と労力がかかることになる。

手動埋め込みコード

さらに、埋め込み動画に動画の長さを表示することができません。そのため、訪問者は再生ボタンをクリックすることなく、動画の長さを確認することができません。

一方、YouTubeのフィードプラグインを使って、自動で動画を埋め込むこともできる。

そして、YouTube Feed Proを使用することができる最良のオプションです。

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

市場で最高のYouTubeフィードプラグインとして、YouTube Feed Proを使ってYouTubeのプレイリスト、チャンネル、お気に入りリストなどの動画を埋め込むことができます。

さらに、YouTubeフィードの作成、カスタマイズ、埋め込みを行うためのシンプルなガイドフローが用意されており、コーディングは不要です。

Youtubeフィード・プロのためのガイド・フロー

実際、このプラグインにはYouTubeフィードをパーソナライズするのに役立つシンプルなビジュアル・カスタマイザーが付属している。

そこから、レイアウト、ボタンデザイン、ヘッダー、カラースキームなどを変更することができます。

実際、ライブフィードエディターを使って、YouTubeフィードのルック&フィールを簡単にカスタマイズすることができる。

さらに、YouTube Feed Proでは、動画の再生時間を表示したり非表示にしたりすることもできる。

YouTubeフィードプロ

一番の魅力は?YouTube Feed Proには、いつでもあなたの質問に答えてくれる専門家チームがついています。

YouTube動画をウェブサイトに表示する準備はできましたか?YouTube Feed Proはこちらから

それでは、チュートリアルを始めましょう。

YouTubeの動画をウェブサイトに追加する方法

以下の簡単なステップに従うだけで、YouTube動画の美しいフィードを再生することができます。

ステップ1: YouTube Pro用フィードをインストールする

まずは、YouTube Feed Proプラグインをこちらから入手し、コンピューターにダウンロードしてください。

プラグインを保存したら、WordPressウェブサイトにインストールして有効化してください。

この方法については、WordPressサイトにプラグインをインストールする方法についてのチュートリアルをご覧ください。

その後、ステップ2でYouTube動画のフィードを作成することができます。

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

プラグインの準備ができたら、埋め込みたい動画のYouTubeフィードを作成します。

管理画面のダッシュボードから、まずYouTubeフィード " すべてのフィード メニューを開いて、YouTubeフィードのリストを表示します。

プラグインを使うのは初めてですか?新規追加をクリックするだけで、新しいフィードを作成できます。

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

YouTube Feed Proは、YouTubeビデオのソースを選択することができます。

YouTubeチャンネル、プレイリスト、お気に入りリスト、単一動画など、6つの異なるオプションから選択できる。

お好みのオプションを選択し、「Next」ボタンをクリックします。

youtubeフィードの種類

この例では、YouTube動画のプレイリストからコンテンツを埋め込みます。

次のステップでは、新しく作成したフィードをYouTubeに接続します。

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

YouTubeの動画をサイトに表示するには、このフィードをYouTubeアカウントに接続します。

簡単な方法なら、YouTubeのAPIキーを使えばいい。

APIキーをまだお持ちではないですか?YouTubeのAPIキー作成に関する便利なチュートリアルがありますので、ぜひご覧ください。

キーを取得したら、ウェブサイトに戻り、Addをクリックする前にポップアップに貼り付けます

youtubeにapiキーを追加

これで、接続したいYouTubeチャンネル、プレイリスト、お気に入り、リストなどを選択できる。

この例では、YouTubeのプレイリストを接続する。

ウェブブラウザでYouTubeのプレイリストを開き、最後にあるコードをコピーするだけです。

コピー再生リストリンクyoutubeフィードプロ

プレイリストIDコードを手に入れたら、もう一度ウェブサイトに戻ってください。

そこで、コードをプレイリストID フィールドに貼り付け、「次へ」をクリックする。

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

ここまでで、新しいYouTube動画フィードを作成し、それをソースに接続しました。

ステップ4では、カスタマイズオプションを使って、YouTube動画のウェブサイト上での見え方を変更することができます。

ステップ4:YouTube動画フィードをカスタマイズする

YouTube Feed Proの素晴らしいところは、WordPressサイトのデザインを自動的にコピーしてくれるところです。

さらに、YouTubeフィードのデザインを自由にコントロールできる。

まずは、フィード用にあらかじめデザインされたテンプレートをインポートしましょう。8種類のテンプレートからお選びいただけます:

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

オプションからフィードテンプレートを選択し、「Next」をクリックして続行します。

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

YouTube Feed Proは、新しいフィード用にこのデザインを自動的にインポートします。

次に、このプラグインはビジュアルカスタマイザーにあなたを送り、そこでレイアウト、カラースキーム、ボタンデザインなどを選ぶことができます。

ライブフィードカスタマイザー youtubeフィードプロ

さらに、右側にフィードのライブプレビューがあります。何か変更を加えるたびに、フィードのプレビューをリアルタイムで見ることができます。

ビデオの再生時間と長さを表示するには、左側の「ビデオ」オプションをクリックしてください。

ビデオオプション youtubeフィードプロ

そうすれば、動画のスタイル、ホバー状態、フィードに表示される動画要素を編集するかどうかを選択できます。

とりあえず、 Edit Individual Elements オプションをクリックして続行する。

ここから再生アイコン、ビデオタイトル、ユーザー名などの表示・非表示を選択できます。左のオプションをチェックしたり外したりするだけで、その要素を表示したり非表示にしたりできます。

YouTubeの動画を時間や長さを指定して埋め込むには、「動画の長さ」オプションをチェックしてください。

このように、動画のサムネイルの隅にデュレーションタグが表示されるようになります。

変更を保存するには、上部にある「保存」ボタンをクリックします。

それが終わったら、右上にある小さなカスタマイズボタンをクリックして次に進みます。

次に、WordPressサイト上でYouTube動画のレイアウトを設定します。

左側にある「Feed Layout」オプションを探し、クリックする。

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

以下、これらのレイアウトを見てみよう:

レイアウトオプション YouTubeフィードプロ

グリッドレイアウトにすると、シンプルな行と列で動画を表示できます。

そのため、一度に大量の異なるビデオを表示することで、訪問者を惹きつけることができる。

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

次に、YouTubeギャラリーレイアウトは、1つの魅力的な動画に焦点を当てるのに役立ちます。

そのため、フィードには大きなYouTube動画が表示され、その下に小さなサムネイルが表示される。

Youtubeフィードプロ用ギャラリーレイアウト

ユーチューブ・ユーザーが親しみを感じるレイアウトなら、リスト・ オプションを選ぶことができる。

そうすれば、動画コンテンツを1つのカラムで表示することができ、各動画がサイト上で大きなスペースを確保できる。

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

ウェブサイトをよりインタラクティブにする素晴らしい方法をお探しですか?

カルーセルレイアウトを選択し、動画フィードをYouTubeスライドショーのカルーセルに変換します。

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

フィードのレイアウトに満足したら、「保存」をクリックして変更を確定します。

残りのカスタマイズオプションから、ヘッダーのスタイル、ボタン、ビデオの数などを変更することができます!

YouTubeフィードのデザインに満足したら、「 保存」をクリックするのを忘れずに。

次のステップでは、これらのYouTube動画を、長さと時間を指定して埋め込むことができる。

ステップ5:YouTube動画をウェブサイトに埋め込む

カスタマイズが完了したら、YouTube動画を埋め込む方法を2種類から選択できます:

  • YouTubeの動画をウェブページに埋め込む
  • サイトのサイドバーやフッターにYouTube動画を埋め込む

どちらを選ぶか迷っていませんか?以下、この2つの選択肢を見てみよう:

YouTube動画をウェブページに埋め込む

このプラグインはとても使いやすいので、ビジュアルカスタマイザーから直接動画を埋め込むことができます。

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

YouTube Feed Proは、このフィードのすべての埋め込みオプションをポップアップで表示します。YouTubeのショートコードをここにコピーすることもできます。

続行するには、ポップアップの「ページに追加」ボタンをクリックします。

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

そうすると、あなたのサイトで利用可能なすべてのWordPressページのリストが表示されます。

YouTube動画を埋め込むページを選択し、「追加」をクリックします。

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

このように、プラグインは公式のWordPressエディタにリダイレクトするので、動画を埋め込むことができます。

まず、プラス(+)アイコンをクリックして、新しいコンテンツブロックを追加します。

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

上部の検索バーを使って、「youtube feed」 ブロックを探す。

最後に、検索結果からYouTubeのフィードブロックをクリックして、YouTubeフィードを埋め込むことができます。

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

Updateをクリックすると、あなたのページを訪れた人はYouTube動画のフィードを動画の長さとともに見ることができる。

ページを開けば、自分で確認することもできる。

それでは次に、このプラグインを使ってYouTube動画を埋め込む方法を見てみよう。

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

また、サイドバーやフッターなど、ウェブサイトのウィジェット対応エリアに動画を埋め込むこともできます。

YouTubeウィジェットを埋め込むには、以前のようにビジュアルカスタマイザーを使用するだけです。

動画カスタマイザーが開いていない場合は、サイトのダッシュボードを開き、YouTubeフィード " すべてのフィード メニューに移動します。

ここで、先ほど作成したYouTube動画フィードをクリックする。

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

そうするとビジュアルカスタマイザーがもう一度表示されます。

先ほどと同じように、Embed ボタンをクリックして続けることができる。

YouTube Feed Proは、YouTube動画を埋め込むためのすべての方法をポップアップで表示します。

ウィジェットに追加 ボタンをクリックするだけです。

ウィジェットに追加する

これをクリックすると、WordPressウェブサイトのウィジェットページにリダイレクトされます。

サイドバーに動画を表示したい場合は、こちらのサイドバーセクションをクリックしてください。

サイドバーパネルを開く

このチュートリアルではサイドバーも使用する。

また、フッターパネルをクリックして、メインコンテンツの下に動画を埋め込むこともできます。

フッターパネルを開く

サイドバーまたはフッターに新しいウィジェットを追加するには、下部にあるプラス(+)アイコンをクリックします。

その後、YouTube用のフィードをクリックするだけで、YouTubeのビデオフィードを埋め込むことができます。

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

更新をクリックして新しいウィジェットを保存すると、YouTubeフィードウィジェットがサイトに表示されます。

ウェブサイトを開くと、下の例のようにYouTubeの動画が埋め込まれているのが見えます:

長さのあるサイドバー・ユーチューブ動画

これで完成だ!

たった数分でYouTubeの動画をWordPressのウェブサイトに埋め込むことができます!

YouTube Feed Proプラグインさえあれば、あなたのウェブサイトに美しいYouTubeコンテンツのフィードを設置することができます。これだけで、エンゲージメントを高め、コンバージョンを増やし、ビジネスを成長させることができます。

YouTubeフィードを簡単に作成しませんか?ここでYouTube Feed Proを始めましょう。

ついでに、YouTubeで顔を出さずにお金を稼ぐ方法についてのガイドもご覧ください。

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

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

コメントを追加する

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