はじめに
Youtubeの動画やプレイリスト（再生リスト）を、自分のブログやWebサイトに埋め込みたい。
そんな時はYoutubeで生成できる埋め込みコードをコピーして利用するのが基本となります。
それくらい知ってるよ！という方も多いと思いますが、実は埋め込みコードには非常にたくさんのオプションが用意されており、これらを使いこなすことでYoutube動画の埋め込みを様々にカスタマイズできます。
今回はまず、基本となる動画埋め込みの方法アレコレについて紹介します。
目次
【基本編】動画の埋め込みと設定
- Youtube動画をブログに埋め込む
- 横幅 / 縦幅を調整して埋め込み
- 動画のタイトルを非表示に
- 動画の終了後、関連動画を表示させない
- プレーヤーのコントロールを非表示に
- Youtubeのプレイリストを埋め込む方法
1. Youtube動画をブログ等に埋め込む
ブログやサイトにYoutube動画を埋め込みたい時、もっとも簡単な方法がYoutubeから直接「埋め込みコード」を取得し、コピペするという方法です。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
コピーした埋め込みコードをブログに直接貼り付ければ、Youtube動画がブログから見れるようになります。
なお、埋め込みコードの欄に「リクエストによる埋め込み無効」と書かれている場合はブログやサイトに動画の埋め込みは出来ません。
例え、コピペした埋め込みコードのURL部分だけを書き換えても、動画は再生できません。
このリクエスト無効設定は増加傾向にあり、企業が運営する公式アカウントやYoutuberなどもリクエスト無効を使うのが当たり前になってきています。
（リクエスト無効設定はYouTube側の動画設定で行います。）
2. 横幅 / 縦幅を調整して埋め込み
<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
ブログに貼り付けたけど、記事の横幅やバランスを考えてと幅を調整したい。
こんな場合は、貼り付けた埋め込みコードのwidth=”XXX” height=”XXX”の部分を横幅に合うように調整すれば大丈夫です。上記は幅718px（width=”718″）に設定しています。
横幅と縦幅は、Youtubeの「埋め込みコード」欄からも設定できます。こちらで設定すると、横幅に合わせて自動で縦幅を指定してくれるので楽になります。
縦横比を計算するくらいならYoutubeで設定しましょう。
3. 動画のタイトルを非表示に
上部分に表示されていた動画のタイトルを非表示にできます。動画のタイトルにはYoutubeへのリンクが設定されています。クリックしてYoutubeへ飛んでしまうのを避けたい場合は良いでしょう。
<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?showinfo=0" frameborder="0" allowfullscreen></iframe>
基本は同じです。URL部分のすぐ後ろに?showinfo=0を追記するのみでO.K.これでタイトルが表示されなくなります。見た目がシンプルになるのもgood!
4. 動画の終了後、関連動画を表示させない
埋め込んだYoutube動画は、終了すると自分のものでない関連動画がババッと出てきてしまいます。この仕様が不都合な場合についてです。
<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?rel=0" frameborder="0" allowfullscreen></iframe>
動画のURL部分のすぐに後ろに?rel=0を追記します。
こうすることで、動画が終わっても自身のチャンネルの関連動画に表示されます。
企業で運営するサイトで自社と関係ない動画を表示したくない場合は非常に有効です。
5. プレーヤーのコントロールを非表示に
埋め込んだYoutube動画の下部分に表示されている、コントロールも非表示に出来ます。
<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?controls=0" frameborder="0" allowfullscreen></iframe>
やり方はまったく同じで、URL部分のすぐ後ろに?controls=0を追記するだけ。これだけでコントロールが非表示になります。
しかし、この機能はあまりお勧めできません。クリックで動画の再生 / 停止は可能ですが、動画を飛ばしたり少し前に戻ったり出来ない上、字幕表示や画質の変更も不可能になります。UX的に微妙ですね。。。
6. Youtubeのプレイリストを埋め込む方法
動画単体だけでなく、プレイリストをブログなどに埋め込むことも可能です。
ブログに貼り付けたいプレイリストを開き、「共有」という部分をクリックします。
動画を埋め込む時と同じやり方で、埋め込みコードをコピーして貼り付けるだけでO.K.！
<iframe width="718" height="404" src="https://www.youtube.com/embed/videoseries?list=プレイリストID&showinfo=0" frameborder="0" allowfullscreen></iframe>
?list=プレイリストIDの部分に、埋め込みたいプレイリストのURLを入力する方法でも同様の挙動になります。
まとめ
今回は埋め込みコードの生成と基本となるパラメーター設定についてまとめました。
他にもいろいろと設定があるので、別途記事としてまとめていきます！
参考：YouTube公式リファレンス
https://developers.google.com/youtube/player_parameters?hl=ja
関連リンク
YouTubeのWebサイト埋め込みテクニック【再生編】動画の再生方法を設定する
YouTubeのWebサイト埋め込みテクニック【表示編】＆【応用編】高度な設定