世界一の動画共有サイトとして有名なYoutubeですが、共有や埋め込みを手軽に行えることから、近年ではサイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。
特に、投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。
今回は、Youtube動画を様々な方法でサイトに埋め込んで表示させる方法をご紹介させていただきます。
Youtube埋め込みとは
YouTube動画の埋め込みとは、ウェブサイトやブログのページにYouTubeの動画を表示させることです。動画が直接ページ上で見られるようになり、訪問者はそのページを離れることなく動画を再生できます。これにより、ウェブサイトの内容を豊かにし、ユーザー体験を向上させることができます。
Youtubeをウェブサイトに埋め込み動画を表示する方法
Youtube動画の埋め込みには、大きく分けて以下の3つの方法があります。
1. Youtube動画のURLを使う方法
2. Youtube動画の埋め込みiframeタグを使う方法
3. YoutubeAPIを使う方法（Youtube data API or 埋め込みツール）
1および2の方法はYoutubeの公式で提供されている機能で、誰でも使える方法ですが、以下のような形のウェブサイトへの実装は実現することができません。
- チャンネルの最新動画を動的に表示する
- 複数のYoutube動画を一覧で表示させる
- サイトデザインに合わせレイアウトを調整する
- ハッシュタグをもとに不特定多数の動画を収集する
- TikTokやInstagramリールの動画と一緒に埋め込む
自分のウェブサイトに合わせてより高度なカスタマイズしたい場合は３のAPIを使った方法がおすすめです。
以下にそれぞれの特徴と方法について詳しく見て、皆さんに会った方法を見つけてください。
1. Youtube動画のURLを使う方法
CMS（例: WordPress）やブログサービスがYouTubeのURLを自動的に認識してプレーヤーに変換する機能を提供している場合に使える方法です。
記事やページに直接YouTubeの動画URLを貼り付けます。動画の「共有」ボタンをクリックするとリンクURLが表示されますので「コピー」します。
WordPressやWixなど人気のウェブサイトビルダーでは、URLを入力するためのブロックが用意されていて、コピー&ペーストで動画が表示されます。
この方法はコーディング知識が不要で無料でできる、最も簡単な埋め込み方法です。
ただし、自動で生成されるプレーヤーのサイズはウェブサイトのデザインやレイアウトに依存する場合が多く、カスタマイズ性が低い場合が多く、また開始時間の指定などもできません。
詳しい方法を知りたい場合は、この記事の後半のセクションで確認してください。
2. Youtube動画のiframeタグを使う方法
動画のサイズや再生開始時間などをカスタマイズをしてウェブサイトに表示したい場合は、Youtubeから埋め込みタグを取得する方法があります。
動画のサイズや開始時間の指定など、カスタマイズが可能ですが、HTMLの編集が可能な環境が必要です。
動画のiframeタグの取得方法は以下の通りです。
1. サイトへの埋め込みたい動画を開き、メニューバーから「共有」ボタンを選択します。
2. 表示された選択肢の中から「埋め込む」をクリックします。
3. 動画のプレビューとともに表示される埋め込み用コードを「コピー」を押して取得します。
4. 取得したコードを、サイト上で動画を表示させたい位置に埋め込めば完了です。（<body> タグ内に埋め込む必要があります）
Youtube動画の再生や表示のカスタマイズ方法
Youtubeから動画を埋め込む際には、パラメータを追加することで再生や表示をさらにカスタマイズした状態で表示させることが可能です。ここでは、代表的な例をいくつかご紹介いたします。
-
- 動画の再生開始時間を指定する
動画の再生開始時間を指定することで、長い動画の一部分にフォーカスして表示させることができます。
-
- コントロールバーの表示をなくす
動画のスキップなどを行うためのコントロールバーを非表示にすることができます。サイト訪問者に対し最後まで必ず見せる必要がある動画を表示させる場合などに有効です。
動画のスキップなどを行うためのコントロールバーを非表示にすることができます。サイト訪問者に対し最後まで必ず見せる必要がある動画を表示させる場合などに有効です。
-
- 動画の表示サイズを変更する
取得したコードの width（横幅）とheight（高さ）の値を変更することで、表示させる動画の大きさを変更することができます。下記の例では、widthを320ピクセル、heightを180ピクセルに設定することで小さめに表示させています。
-
- 動画の再生終了位置を指定する
Youtubeサイト内の設定で終了位置の指定はありませんが、パラメータを追加することで開始時間だけでなく終了時間も制御することができます。動画URLの末尾に end?=(秒数) を追加すれば設定が可能です。下記の例では、30秒時点を動画の再生終了時間に設定しています。
-
- 動画の再生バーの色を変更する
動画が再生されている秒数を示す再生バーの色を「赤（red）」または「白（white） 」に設定することができます。動画の色合いがデフォルトの赤色と合わない場合には、この設定を変更することで調整可能です。
-
- 再生リストとして動画を埋め込む
またYoutubeの動画は個々に埋め込むだけでなく、再生リストを単位として埋め込むことも可能です。最初の動画の再生が終了したのちには再生リスト内の次の動画を続けて再生でき、複数の動画をまとめて見せたいときに有効です。
-
- レスポンシブに動画を埋め込み・表示させる方法
Youtubeの動画埋め込みはiframe（アイフレーム）のコードを使用しているため、そのままの設定ではスマホ・PC・タブレット全ての画面で同じ大きさでしか表示させることができません。以下のようなコードを埋め込むことで動画をレスポンシブ（PC・スマホ両方に適する形）に表示させることができます。
埋め込み時のカスタマイズを設定できるパラメータ一覧を確認については、Youtube公式サイト（外部リンク）より確認することができます。
3. Youtube APIを使う方法（Youtube data APIまたは埋め込みツール）
YouTube APIはYouTubeの機能やデータを、ウェブサイトや他社開発のアプリケーションで使えるようにするためのツールです。
例えば、YouTubeの動画を検索したり、特定の動画の情報を取得したり、自分のウェブサイトに動画を埋め込んだりする際に使用します。
APIを使うと動画をWEBサイトに埋め込む際に、高度なカスタマイズが可能になります。例えばYouTube Data APIを使用して動画情報を取得し、カスタムプレーヤーをウェブサイトに組み込みことができます。
しかしAPIの利用には開発の知識が必要です。そこでおすすめしたいのがYoutube API対応のサードパーティアプリ≒埋め込みツールの活用です。
Youtubeの埋め込みツールやプラグインを使う方法
Youtubeの埋め込みツールとは、Youtube API対応のサードパーティアプリとも呼ばれます。これらはYoutubeAPIを統合している第三者の会社が開発したアプリケーションのことです。
埋め込みツールを使えば、コーディングスキル不要で、Youtube動画を簡単に動画を埋め込みWebサイトに表示できます。EmbedSocialのテンプレートを見ていたけばわかるように、高度なカスタマイズも可能です。
このようなツールでは一般的に、ツール上で自動的に動画を取得し、WEBサイトに埋め込むためのデザインや各種カスタマイズを行います。
埋め込みはhtmlコードを使います。ユーザーはコードをコピーして、WordPressなどでつくったウェブサイトのHTMLに貼り付ければ、Youtube動画をウェブサイトに表示することができます。
以上3つの方法をご紹介しました。これらの方法を適切に選択し、使い分けることで、ウェブサイトやブログに動画を効果的に埋め込むことができます。ニーズに応じて最も適した方法を選んでください。
ここからは各種ウェブサイトビルダーで動画を埋め込み表示させる方法をご紹介します。
WordPressサイトにYoutubeの動画を埋め込む方法
WordPressではURLを使う方法ととiframeを使う方法、2つの方法で動画を埋め込むことができます。
URLを直接記入する方法
WordPressでは、エディタにURLを記入するだけで動画を表示させることができます。
1. ブラウザでYoutube動画を開き、「共有」から「コピー」を選択することで動画URLを取得することができます。
2. 取得した動画URLをそのままWordpressのエディターにコピーすれば表示させることができます。
ただしこの場合には表示させる動画の大きさを変更することができないため、サイト幅に合わせた表示を希望される場合には事項以降の方法で動画を埋め込むことが有効です。
ショートコードを使って記入する方法
下記のようにショートコードを利用して埋め込みを行うことも可能です。URLをコピー＆ペーストする場合には動画の幅を指定することができないため、一定の幅で動画を表示させたい場合にはこの方法が有効です。embedで囲われた部分のURLを変更することで、埋め込む動画を指定することができます。
使用中のWordpressテーマによっては、ショートコードの利用・動画サイズの変更ができない場合があります
WixサイトにYoutube動画を埋め込む方法
WixではURLを使う方法と埋め込み用のiframeを使う方法の2つで動画をウェブサイトに表示することができます。
URLを使う場合
1.編集画面左上の＋アイコンをクリックして表示されたメニューから「Video Player」を選択します。
2.表示されたデフォルトの動画の上の「Change Video」をクリックします。
3.Youtubeアイコンをクリックして、取得する動画のURLを入力します。
埋め込み用のタグを使う場合
1.編集画面左上の＋アイコンをクリックして表示されたメニューから「iframe」を選択します。
2.埋め込みブロック上部の「Enter Code」をクリックして、タグ入力画面を表示させます。
3.動画から取得したiframeタグを貼り付け、入力画面の下の「Update」をクリックします。
Youtube埋め込みツールで動画をWebサイトに埋め込む方法
SNS埋め込みツールEmbedFeedを使うと簡単に動画をウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。
ステップ1: EmbedFeedアカウントの作成
まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、7日間無料トライアルを始めて、以下のステップに進んでください。
ログインすると、YouTubeをソースとして追加するためのソースセクションに移動します。
ステップ2: 収集元プラットフォームとしてYouTubeを選ぶ
ソース（収集元）選択画面で、YouTubeを選びます。
ステップ3: YouTube動画のソースタイプ（収集元）を選択する
EmbedFeedはYouTubeの動画を、チャンネル、プレイリスト、ハッシュタグ、3つの方法で収集することができますので、お好みのソースを入力してください。ここでは例としてチャンネルから動画を収集しますので、チャンネルのURLを入力して次に進みます。
ステップ4: YouTubeを表示するレイアウトのテンプレートを選択する
YouTubeをウェブサイトに表示させるレイアウトをテンプレートから選びます。テンプレートを使わないで自分でデザインを一から作ることもできます。
テンプレートを選択すると、ウィジェット（YouTubeの埋め込みパーツ）の編集画面に進みます。ここで、YouTube動画をウェブサイトに埋め込むデザインのカスタマイズや投稿の並べ替えなどをします。
ステップ5: YouTubeをWEBサイトに埋め込む用のコードをコピーする
すべての編集が済んだら設定を保存します。画面左上にコードが表示されているので、コードをコピーするをクリックし、ウェブサイトに投稿を埋め込む準備は完了です。
ステップ6：コピーしたコードをウェブサイトに貼り付ける
ウェブページのコードを編集できるプラットフォームを使用している場合、YouTubeウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
設定は以上です。これで以下の様にYouTube動画をWebサイトに埋め込み表示することができます。
チャンネルの最新動画を動的に表示する方法
EmbedSocialを使うと、Youtubeチャンネルの動画一覧をWEBサイトに埋め込み、最新の動画が投稿されるたびにサイト上でも自動で内容を反映させることができます。チャンネルで展開しているコンテンツを簡単に紹介することができ、初期実装のみで自動化できるため運用の手間も削減することが可能です。
Youtubeチャンネルの動画を一覧で埋め込む例
自社サイトのデザインに合わせてレイアウトを変更する方法
『EmbedSocial』では表示させるレイアウトを8種類（2022年9月現在）から選択することができます。全てのレイアウトがレスポンシブ対応しているため、追加のコーディングを行うことなく、PC・スマートフォンどちらから閲覧した場合でもユーザーは快適な状態で動画を見ることができます。下記ではそのうち4種のレイアウトをご紹介いたします。
「フィード」レイアウト
「Grid」レイアウト
「Masonry」レイアウト
「Carousel」レイアウト
ハッシュタグをもとに不特定多数の動画を収集する方法
『EmbedSocial』のさらに大きな特徴の１つは、Youtubeからハッシュタグをもとに動画を収集できる点にあります。チャンネル・プレイリストをもとに収集する場合は基本的に１つのチャンネルから動画を収集しますが、ハッシュタグで収集を行うことで不特定多数のチャンネルから関連する動画を一覧で取得することが可能となります。
具体的な導入事例として、ヤマハ様では「ぷりんと楽譜」の20周年キャンペーンとして実施された動画コンテストにEmbedSocialを活用いただきました。一般の方に演奏または歌唱動画をInstagram・Youtubeに投稿してもらう企画を実施され、それぞれのSNSからハッシュタグをもとにして関連する動画を集約されています。
TikTokやInstagramリールの動画と一緒に埋め込む方法
EmbedSocialはYoutubeだけでなく、InstagramやTwitter・TikTok・Facebookなど様々なSNSから写真・動画を収集し、WEBサイトに埋め込んで活用することができます。収集した動画は混在させて埋め込むことも可能であり、たとえばYoutube・TikTok・Instagramリールの自社投稿動画を合わせて表示させることも可能です。
複数SNSから収集した動画の埋め込み活用事例
YouTubeを活用してウェブサイトのユーザー体験を向上させよう
今回ご紹介したYouTubeに限らず、SNSはウェブサイトと有機的に連携させることで、より多くの価値をもたらすことが出来ます。
SNS埋め込み・UGC活用ツールを提供している当社では、各種SNSをウェブサイト上に表示させる方法の解説記事を豊富に公開しています。InstagramやX(旧Twitter)の埋め込み表示方法や、TikTokの表示方法、さらにはPinterestなどのウェブサイトへの埋め込み表示方法も紹介していますので、ぜひ当社の他の公式ブログもチェックしてみてください。
