Youtube動画のサイトへの埋め込み｜レスポンシブ対応・パラメータの設定方法

• ＃youtube埋め込み

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

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

目次

1. Youtube動画をサイトに埋め込む方法
2. WordPressへのYoutube動画の埋め込み
3. 埋め込んだ動画のカスタマイズ（レスポンシブ対応・パラメータ設定）
4. SNS投稿埋め込みツール EmbedSocialとは？
5. チャンネルやプレイリストごとに、Youtube動画を動的に埋め込む方法
6. Instagram・TikTokなど、他のSNS動画と組み合わせて埋め込む方法

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

埋め込み用コードを取得する方法

最もシンプルな方法で、こちらの方法でほとんどのサイトに埋め込みを行うことが可能です。

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

2. 「埋め込む」という選択肢が表示されますので、そちらをクリックします。

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

こちらのコードをサイトのbodyタグ内に埋め込めば完成です。

WordPressへのYoutube動画の埋め込み

URLを直接記入する方法

WordPressでは、エディタにURLを記入するだけで動画を表示させることができます。ただしこの場合には表示させる動画の大きさを変更することができないため、サイト幅に合わせた表示を希望する際は次の方法や埋め込み用のコードを記入して、動画を埋め込むことも有効です。

ショートコードを使って記入する方法

下記のようにショートコードを利用して埋め込みを行うことで、動画の幅を簡単に指定することができます。動画の幅と高さの比率は変更することができないため、幅を指定すると自動的に高さが定まります。

[embed]で囲われた部分のURLを変更することで、埋め込む動画を指定することができます。

※ご使用のテーマによっては、ショートコードの利用・動画サイズの変更ができない場合があります。

埋め込んだ動画のカスタマイズ（レスポンシブ対応・パラメータ設定）

ここからは、埋め込み用コードを取得してYoutube動画を埋め込む際にできるカスタマイズをご紹介させていただきます。（埋め込み用コードの取得方法はこちら）

取得した埋め込み用コードは、以下のようなものとなります。

動画のサイズを変更する方法

取得したコードのwidth（横幅）とheight（高さ）の値を変更することで、表示させる動画の大きさを変更することができます。

※値の単位はピクセルです。

動画をレスポンシブに表示させる方法

先ほどのようにwidth（横幅）とheight（高さ）を直接指定した場合には、PC・スマホそれぞれからページを閲覧した場合にどちらかで動画の大きさが不自然になってしまいます。以下のようなコードを埋め込むことで、PC・スマホ両方からアクセスした場合でもYoutubeの動画を自然な大きさで表示させることができます。

下記のコードをコピーして埋め込むと動画をレスポンシブに表示させることができます。
※動画のURLについては適宜変更くださいませ

動画のスタート位置を指定する方法

動画のURL末尾に「?start=（秒数）」を指定することで、動画の再生開始位置を指定することができます。1分を超える場合にも72秒などとして秒数で指定します。

コントロールバーを非表示にする方法

動画のURL末尾に「?controls=0」を指定することで、動画再生時にコントロールバーを非表示にすることができます。

Youtubeのロゴを非表示にする方法

コントロールバーを非表示にした場合、代わりに動画の右下にYoutubeのロゴが表示されます。URL末尾に「&modestbranding=1」を追加することで、このロゴを非表示にすることが可能です。

Youtube公式サイトより、埋め込み時のカスタマイズを設定できるパラメータ一覧を確認することができます。

SNS投稿埋め込みツール EmbedSocialとは？

ソーシャルメディアの投稿・レビューなどを、簡単にWEBサイトに埋め込むことができるSaaS型のウィジェット作成ツールです。全世界で50,000人以上のユーザーが1,000,000以上のウィジェットを作成し活用しております。

対応しているソーシャルメディアは現時点で7種類（2020年9月現在）。InstagramやTwitter、Youtube・TikTokなどの投稿・写真・動画などを収集して、WEBサイトへと同期する形で埋め込むことができます。

使い方は様々。多様な使い方に対応できる充実した機能と簡単な操作性が人気の理由の一つです。

チャンネルやプレイリストごとに、Youtube動画を動的に埋め込む方法

上記で紹介した方法では一つ一つの動画を手動で埋め込んでいく必要があるため、チャンネルの動画を全て表示させたい場合などには不向きです。また、表示させるレイアウトも基本的には同じとなります。

EmbedSocialのフィード機能では、

•     チャンネルやプレイリストの全動画をまとめて埋め込む
•     サイト上で表示させるレイアウトを自由に変更する
•     Instagram、TikTokなどの他SNSと組み合わせて埋め込む

ことができ、先ほどまでと同様に埋め込み用のコードを取得してWEBサイト上で簡単に表示させることができます。

チャンネル・プレイリストの全動画をまとめて埋め込み

設定は視覚的にやさしい操作で、誰でも簡単に行っていただくことができます。

動画の収集元を選択

チャンネル・プレイリスト・ハッシュタグの3つを収集元として指定することが可能です。「チャンネル」「プレイリスト」を選択したのちには該当のURLを入力し、「ハッシュタグ」を選択した場合には動画を収集したいハッシュタグを記入します。

埋め込み用コードの取得

以上の設定を完了すると、WEBサイト上に表示するウィジェットが作成されます。埋め込み用のコードを取得し貼り付けを行うと、WEBサイト上での表示が完了します。

収集元に指定したチャンネルなどに新たな動画が追加された場合にも管理画面での設定なく、自動で新規動画をサイト上へと表示させることができます。

レイアウトの変更が可能

表示させるレイアウトは10種類以上から選択することができます。ほぼ全てのレイアウトがレスポンシブ対応しているため、PC・スマートフォンどちらから閲覧した場合でもユーザーは快適な状態で動画を見ることができます。

「フィード」レイアウト

「Grid」レイアウト

「Carousel Slider」レイアウト

「Slide Show」レイアウト

実際の表示例

Instagram・TikTokなど、他のSNS動画と組み合わせて埋め込む方法

EmbedSocialでは、YoutubeやInstagram・TikTokなど様々なソーシャルメディアから収集した投稿・動画を一つのウィジェットとして組み合わせて表示させることができます。Twitter・Facebookからの投稿収集にも対応しており、動画共有サイトVimeoからも動画を収集し、EmbedSocialを通してサイト上へと表示させることができます。

投稿を収集したチャンネル・アカウント・ハッシュタグなどを管理画面から選択いただくと、組み合わせの表示が可能となります。

EmbedSocialはコーディングなしでSNS系動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。

ご興味のある方はぜひ無料トライアルから試してみてはいかがでしょうか。