最終更新日 2022/09/12 投稿日 2020/08/25

【2022年9月更新】Youtube動画をWEBサイトに埋め込む方法まとめ!

世界一の動画共有サイトとして有名なYoutubeですが、共有や埋め込みを手軽に行えることから、近年ではサイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。特に、投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。

今回は、Youtube動画を様々な方法でサイトに埋め込んで表示させる方法をご紹介させていただきます。

目次

  1. Youtube動画から埋め込みコードを取得する方法
  2. WordPressサイトにYoutubeの動画を埋め込む方法
  3. 【応用編1】動画の再生や表示をカスタマイズする方法(パラメータの追加など)
  4. 【応用編2】レスポンシブに動画を埋め込み・表示させる方法
  5. 【拡張編1】チャンネルの最新動画を動的に表示する方法
  6. 【拡張編2】自社サイトのデザインに合わせてレイアウトを変更する方法
  7. 【拡張編3】ハッシュタグをもとに不特定多数の動画を収集する方法
  8. 【拡張編4】TikTokやInstagramリールの動画と一緒に埋め込む方法

Youtube動画から埋め込みコードを取得する方法

単純に自社のYoutubeアカウントで投稿した動画を自社サイト上にのせる場合には、最もシンプルな方法で埋め込みを行うことが可能です。

※一般的な埋め込み方法に明るい方は「目次」より内容をスキップしてご覧いただけます

1. サイトへの埋め込みを希望する動画を開き、メニューバーから「共有」ボタンを選択します。

2. 表示された選択肢の中から「埋め込む」をクリックします。

3. 動画のプレビューとともに表示される埋め込み用コードを「コピー」を押して取得します。

4. 取得したコードを、サイト上で動画を表示させたい位置に埋め込めば完了です。(<body> タグ内に埋め込む必要があります)

WordPressサイトにYoutubeの動画を埋め込む方法

URLを直接記入する方法

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埋め込みツール『EmbedSocial』を活用すると上記の全てを実現することができ、サイトデザインや使い方に応じてYoutube埋め込みの実装幅が大きく広がります。以下では『EmbedSocial』を使って実装することができる内容を1つずつご紹介いたします。

チャンネルの最新動画を動的に表示する方法

Youtubeチャンネルの動画一覧をWEBサイトに埋め込み、最新の動画が投稿されるたびにサイト上でも自動で内容を反映させることができます。チャンネルで展開しているコンテンツを簡単に紹介することができ、初期実装のみで自動化できるため運用の手間も削減することが可能です。

Youtubeチャンネルの動画を一覧で埋め込む例

自社サイトのデザインに合わせてレイアウトを変更する方法

『EmbedSocial』では表示させるレイアウトを8種類(2022年9月現在)から選択することができます。全てのレイアウトがレスポンシブ対応しているため、追加のコーディングを行うことなく、PC・スマートフォンどちらから閲覧した場合でもユーザーは快適な状態で動画を見ることができます。下記ではそのうち4種のレイアウトをご紹介いたします。

「フィード」レイアウト

「Grid」レイアウト

「Masonry」レイアウト

「Carousel」レイアウト

ハッシュタグをもとに不特定多数の動画を収集する方法

『EmbedSocial』のさらに大きな特徴の1つは、Youtubeからハッシュタグをもとに動画を収集できる点にあります。チャンネル・プレイリストをもとに収集する場合は基本的に1つのチャンネルから動画を収集しますが、ハッシュタグで収集を行うことで不特定多数のチャンネルから関連する動画を一覧で取得することが可能となります。

具体的な導入事例として、ヤマハ様では「ぷりんと楽譜」の20周年キャンペーンとして実施された動画コンテストにEmbedSocialを活用いただきました。一般の方に演奏または歌唱動画をInstagram・Youtubeに投稿してもらう企画を実施され、それぞれのSNSからハッシュタグをもとにして関連する動画を集約されています。

TikTokやInstagramリールの動画と一緒に埋め込む方法

EmbedSocialはYoutubeだけでなく、InstagramやTwitter・TikTok・Facebookなど様々なSNSから写真・動画を収集し、WEBサイトに埋め込んで活用することができます。収集した動画は混在させて埋め込むことも可能であり、たとえばYoutube・TikTok・Instagramリールの自社投稿動画を合わせて表示させることも可能です。

複数SNSから収集した動画の埋め込み活用事例

EmbedSocialを活用すれば、SNSとWEBサイトの活用が無限大に

以上のように、EmbedSocialを活用するとYoutubeの動画を動的に埋め込むことができるだけでなく、サイトデザインに合わせたレイアウトの変更・ハッシュタグを通した動画の収集などSNSを活用したHP更新の自動化・集客促進などに活用することができます。

2022年9月現在、EmbedSocialは一週間の無料トライアルやWEB会議でのご案内などを実施しております。興味をもたれた方はお気軽にお問い合わせくださいませ。

embedsocial

SNS投稿埋め込みツール
- エンベッドソーシャル -

簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。

お問い合わせ

関連記事

7月 28, 2020

【API操作不要!】Googleの口コミ…

Googleマイビジネスの口コミは、Googleマップのように埋め込み用のコードを取得することはでき...

7月 23, 2020

TikTokをブログやウェブサイトに埋め…

動画共有アプリとして急速に存在感を増しているTikTok。若い世代を強力に引きつける力を持つTikT...

7月 15, 2020

SNSの投稿をWEBサイトに埋め込むこと…

EmbedSocial エンベッドソーシャルとは、Instagram, Facebook, Twit...

Featured image social media aggregator
6月 22, 2020

Twitterの各パーツをブログやウェブ…

ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイ...