世界一の動画共有サイトとして有名なYoutubeですが、共有や埋め込みを手軽に行えることから、近年ではサイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。特に、投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。
今回は、Youtube動画を様々な方法でサイトに埋め込んで表示させる方法をご紹介させていただきます。
最もシンプルな方法で、こちらの方法でほとんどのサイトに埋め込みを行うことが可能です。
1. サイトへの埋め込みを希望する動画を開き、メニューバーから「共有」ボタンを選択します。
2. 「埋め込む」という選択肢が表示されますので、そちらをクリックします。
3. 動画のプレビューとともに表示される埋め込み用コードを「コピー」を押して取得します。
こちらのコードをサイトのbodyタグ内に埋め込めば完成です。
WordPressでは、エディタにURLを記入するだけで動画を表示させることができます。ただしこの場合には表示させる動画の大きさを変更することができないため、サイト幅に合わせた表示を希望する際は次の方法や埋め込み用のコードを記入して、動画を埋め込むことも有効です。
下記のようにショートコードを利用して埋め込みを行うことで、動画の幅を簡単に指定することができます。動画の幅と高さの比率は変更することができないため、幅を指定すると自動的に高さが定まります。
[embed width=”600″]https://www.youtube.com/watch?v=_PjxpyC7MzY[/embed]
[embed]で囲われた部分のURLを変更することで、埋め込む動画を指定することができます。
※ご使用のテーマによっては、ショートコードの利用・動画サイズの変更ができない場合があります。
ここからは、埋め込み用コードを取得してYoutube動画を埋め込む際にできるカスタマイズをご紹介させていただきます。（埋め込み用コードの取得方法はこちら）
取得した埋め込み用コードは、以下のようなものとなります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_PjxpyC7MzY” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
取得したコードのwidth（横幅）とheight（高さ）の値を変更することで、表示させる動画の大きさを変更することができます。
※値の単位はピクセルです。
<iframe width=”320” height=”180” src=”https://www.youtube.com/embed/_PjxpyC7MzY” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
先ほどのようにwidth（横幅）とheight（高さ）を直接指定した場合には、PC・スマホそれぞれからページを閲覧した場合にどちらかで動画の大きさが不自然になってしまいます。以下のようなコードを埋め込むことで、PC・スマホ両方からアクセスした場合でもYoutubeの動画を自然な大きさで表示させることができます。
下記のコードをコピーして埋め込むと動画をレスポンシブに表示させることができます。
※動画のURLについては適宜変更くださいませ
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”>
<iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” width=”560” height=”315” src=”（Youtube動画のURL）” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
</div>
動画のURL末尾に「?start=（秒数）」を指定することで、動画の再生開始位置を指定することができます。1分を超える場合にも72秒などとして秒数で指定します。
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”>
<iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=_PjxpyC7MzY?start=31” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
</div>
動画のURL末尾に「?controls=0」を指定することで、動画再生時にコントロールバーを非表示にすることができます。
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”>
<iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=_PjxpyC7MzY?controls=0” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
</div>
コントロールバーを非表示にした場合、代わりに動画の右下にYoutubeのロゴが表示されます。URL末尾に「&modestbranding=1」を追加することで、このロゴを非表示にすることが可能です。
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”>
<iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=_PjxpyC7MzY?controls=0?modestbranding=1” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
</div>
Youtube公式サイトより、埋め込み時のカスタマイズを設定できるパラメータ一覧を確認することができます。
ソーシャルメディアの投稿・レビューなどを、簡単にWEBサイトに埋め込むことができるSaaS型のウィジェット作成ツールです。全世界で50,000人以上のユーザーが1,000,000以上のウィジェットを作成し活用しております。
対応しているソーシャルメディアは現時点で7種類（2020年9月現在）。InstagramやTwitter、Youtube・TikTokなどの投稿・写真・動画などを収集して、WEBサイトへと同期する形で埋め込むことができます。
使い方は様々。多様な使い方に対応できる充実した機能と簡単な操作性が人気の理由の一つです。
上記で紹介した方法では一つ一つの動画を手動で埋め込んでいく必要があるため、チャンネルの動画を全て表示させたい場合などには不向きです。また、表示させるレイアウトも基本的には同じとなります。
EmbedSocialのフィード機能では、
ことができ、先ほどまでと同様に埋め込み用のコードを取得してWEBサイト上で簡単に表示させることができます。
設定は視覚的にやさしい操作で、誰でも簡単に行っていただくことができます。
チャンネル・プレイリスト・ハッシュタグの3つを収集元として指定することが可能です。「チャンネル」「プレイリスト」を選択したのちには該当のURLを入力し、「ハッシュタグ」を選択した場合には動画を収集したいハッシュタグを記入します。
以上の設定を完了すると、WEBサイト上に表示するウィジェットが作成されます。埋め込み用のコードを取得し貼り付けを行うと、WEBサイト上での表示が完了します。
収集元に指定したチャンネルなどに新たな動画が追加された場合にも管理画面での設定なく、自動で新規動画をサイト上へと表示させることができます。
表示させるレイアウトは10種類以上から選択することができます。ほぼ全てのレイアウトがレスポンシブ対応しているため、PC・スマートフォンどちらから閲覧した場合でもユーザーは快適な状態で動画を見ることができます。
「フィード」レイアウト
「Grid」レイアウト
「Carousel Slider」レイアウト
「Slide Show」レイアウト
実際の表示例
EmbedSocialでは、YoutubeやInstagram・TikTokなど様々なソーシャルメディアから収集した投稿・動画を一つのウィジェットとして組み合わせて表示させることができます。Twitter・Facebookからの投稿収集にも対応しており、動画共有サイトVimeoからも動画を収集し、EmbedSocialを通してサイト上へと表示させることができます。
投稿を収集したチャンネル・アカウント・ハッシュタグなどを管理画面から選択いただくと、組み合わせの表示が可能となります。
EmbedSocialはコーディングなしでSNS系動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。
ご興味のある方はぜひ無料トライアルから試してみてはいかがでしょうか。
Googleマイビジネスの口コミは、Googleマップのように埋め込み用のコードを取得することはでき…
動画共有アプリとして急速に存在感を増しているTikTok。若い世代を強力に引きつける力を持つTikT…
EmbedSocial エンベッドソーシャルとは、Instagram, Facebook, Twit…
ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイ…