世界一の動画共有サイトとして有名なYoutubeですが、共有や埋め込みを手軽に行えることから、近年ではサイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。特に、投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。
今回は、Youtube動画を様々な方法でサイトに埋め込んで表示させる方法をご紹介させていただきます。
単純に自社のYoutubeアカウントで投稿した動画を自社サイト上にのせる場合には、最もシンプルな方法で埋め込みを行うことが可能です。
1. サイトへの埋め込みを希望する動画を開き、メニューバーから「共有」ボタンを選択します。
2. 表示された選択肢の中から「埋め込む」をクリックします。
3. 動画のプレビューとともに表示される埋め込み用コードを「コピー」を押して取得します。
4. 取得したコードを、サイト上で動画を表示させたい位置に埋め込めば完了です。（<body> タグ内に埋め込む必要があります）
WordPressでは、エディタにURLを記入するだけで動画を表示させることができます。
1. ブラウザでYoutube動画を開き、表示されたURLを取得します。スマートフォンの場合には、「共有」から「コピー」を選択することで動画URLを取得することができます。
2. 取得した動画URLをそのままWordpressのエディターにコピーすれば表示させることができます。
ただしこの場合には表示させる動画の大きさを変更することができないため、サイト幅に合わせた表示を希望される場合には事項以降の方法で動画を埋め込むことが有効です。
下記のようにショートコードを利用して埋め込みを行うことも可能です。URLをコピー＆ペーストする場合には動画の幅を指定することができないため、一定の幅で動画を表示させたい場合にはこの方法が有効です。[embed] で囲われた部分のURLを変更することで、埋め込む動画を指定することができます。
使用中のWordpressテーマによっては、ショートコードの利用・動画サイズの変更ができない場合があります
動画のURLについては、先ほどと同様の流れで取得することができます。
Youtubeから動画を埋め込む際には、パラメータを追加することで再生や表示をさらにカスタマイズした状態で表示させることが可能です。ここでは、代表的な例をいくつかご紹介いたします。
動画の再生開始時間を指定することで、長い動画の一部分にフォーカスして表示させることができます。
動画のスキップなどを行うためのコントロールバーを非表示にすることができます。サイト訪問者に対し最後まで必ず見せる必要がある動画を表示させる場合などに有効です。
取得したコードの width（横幅）とheight（高さ）の値を変更することで、表示させる動画の大きさを変更することができます。下記の例では、widthを320ピクセル、heightを180ピクセルに設定することで小さめに表示させています。
Youtubeサイト内の設定で終了位置の指定はありませんが、パラメータを追加することで開始時間だけでなく終了時間も制御することができます。動画URLの末尾に end?=(秒数) を追加すれば設定が可能です。下記の例では、30秒時点を動画の再生終了時間に設定しています。
動画が再生されている秒数を示す再生バーの色を「赤（red）」または「白（white） 」に設定することができます。動画の色合いがデフォルトの赤色と合わない場合には、この設定を変更することで調整可能です。
またYoutubeの動画は個々に埋め込むだけでなく、再生リストを単位として埋め込むことも可能です。最初の動画の再生が終了したのちには再生リスト内の次の動画を続けて再生でき、複数の動画をまとめて見せたいときに有効です。
Youtubeの動画埋め込みはiframe（アイフレーム）のコードを使用しているため、そのままの設定ではスマホ・PC・タブレット全ての画面で同じ大きさでしか表示させることができません。以下のようなコードを埋め込むことで動画をレスポンシブ（PC・スマホ両方に適する形）に表示させることができます。
埋め込み時のカスタマイズを設定できるパラメータ一覧を確認については、Youtube公式サイト（外部リンク）より確認することができます。
様々なサイトで活用できる埋め込みの機能ですが、Youtubeの公式で提供されている機能では下記のような実装は実現することができません。
公式機能で展開できない実装を希望される場合は、SNS埋め込みツールが有効です。
SNS埋め込みツール『EmbedSocial』を活用すると上記の全てを実現することができ、サイトデザインや使い方に応じてYoutube埋め込みの実装幅が大きく広がります。
SNS埋め込みツールEmbedFeedを使うと簡単にリンクトインをウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。
まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、7日間無料トライアルを始めて、以下のステップに進んでください。
ログインすると、YouTubeをソースとして追加するためのソースセクションに移動します。
ソース（収集元）選択画面で、YouTubeを選びます。
EmbedFeedはYouTubeの動画を、チャンネル、プレイリスト、ハッシュタグ、3つの方法で収集することができますので、お好みのソースを入力してください。ここでは例としてチャンネルから動画を収集しますので、チャンネルのURLを入力して次に進みます。
YouTubeをウェブサイトに表示させるレイアウトをテンプレートから選びます。テンプレートを使わないで自分でデザインを一から作ることもできます。
テンプレートを選択すると、ウィジェット（YouTubeの埋め込みパーツ）の編集画面に進みます。ここで、YouTube動画をウェブサイトに埋め込むデザインのカスタマイズや投稿の並べ替えなどをします。
すべての編集が済んだら設定を保存します。画面左上にコードが表示されているので、コードをコピーするをクリックし、ウェブサイトに投稿を埋め込む準備は完了です。
ウェブページのコードを編集できるプラットフォームを使用している場合、YouTubeウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
設定は以上です。これで以下の様にYouTube動画をWebサイトに埋め込み表示することができます。
Youtubeチャンネルの動画一覧をWEBサイトに埋め込み、最新の動画が投稿されるたびにサイト上でも自動で内容を反映させることができます。チャンネルで展開しているコンテンツを簡単に紹介することができ、初期実装のみで自動化できるため運用の手間も削減することが可能です。
Youtubeチャンネルの動画を一覧で埋め込む例
『EmbedSocial』では表示させるレイアウトを8種類（2022年9月現在）から選択することができます。全てのレイアウトがレスポンシブ対応しているため、追加のコーディングを行うことなく、PC・スマートフォンどちらから閲覧した場合でもユーザーは快適な状態で動画を見ることができます。下記ではそのうち4種のレイアウトをご紹介いたします。
『EmbedSocial』のさらに大きな特徴の１つは、Youtubeからハッシュタグをもとに動画を収集できる点にあります。チャンネル・プレイリストをもとに収集する場合は基本的に１つのチャンネルから動画を収集しますが、ハッシュタグで収集を行うことで不特定多数のチャンネルから関連する動画を一覧で取得することが可能となります。
具体的な導入事例として、ヤマハ様では「ぷりんと楽譜」の20周年キャンペーンとして実施された動画コンテストにEmbedSocialを活用いただきました。一般の方に演奏または歌唱動画をInstagram・Youtubeに投稿してもらう企画を実施され、それぞれのSNSからハッシュタグをもとにして関連する動画を集約されています。
EmbedSocialはYoutubeだけでなく、InstagramやTwitter・TikTok・Facebookなど様々なSNSから写真・動画を収集し、WEBサイトに埋め込んで活用することができます。収集した動画は混在させて埋め込むことも可能であり、たとえばYoutube・TikTok・Instagramリールの自社投稿動画を合わせて表示させることも可能です。
複数SNSから収集した動画の埋め込み活用事例
以上のように、EmbedSocialを活用するとYoutubeの動画を動的に埋め込むことができるだけでなく、サイトデザインに合わせたレイアウトの変更・ハッシュタグを通した動画の収集などSNSを活用したHP更新の自動化・集客促進などに活用することができます。
2022年9月現在、EmbedSocialは一週間の無料トライアルやWEB会議でのご案内などを実施しております。興味をもたれた方はお気軽にEmbedSocial Japanまでお問い合わせくださいませ。
【2023年6月更新】インスタグラム新機能・アップデート情報まとめ
WordPressウェブサイトにインスタグラムを埋め込む方法まとめ
インスタグラムをウェブサイトやブログに埋め込む方法と埋め込みインスタ活用術
Instagramサブスクリプションとは？新収益化機能の利用ガイド
リンクまとめツール『Feedlink』の2023年最新アップデートまとめ！
インスタグラムストーリーとは？投稿方法やビジネスでの活用策など徹底解説
