YouTube動画の埋め込みコード…自動再生など細かく設定できた！

YouTube動画をブログに埋め込んで、ここぞというポイントから自動スタートさせたいと思っても、YouTubeには分かるような説明が見当たらずに、何となくあきらめていませんか？

挙句のはてには、「動画の○○分●●秒あたりから問題のシーンになります」なんて記載してみたりしていませんか？

もっとスマートにYouTube動画をあなたのブログに埋め込みましょう。

尚、この記事では、コードの仕組みを理解して、簡単にアレンジできるようになることが目的です。

基本的な埋め込み方法をおさらい
1. YouTube上で、以下の設定が可能
コードの仕組みを確認しておく
1. このコードをベースにやりたいことを追加する
2. これら以外の使えるパラメータ
実際のコードの書き方を確認
まとめ

基本的な埋め込み方法をおさらい

埋め込みたい動画を選ぶ
検索するなどブログ等に埋め込みたい動画を選んでください。
埋め込みコードの取得
動画ページ上で提供されているコードのアレンジ

YouTube上で、以下の設定が可能

動画のサイズを指定

「560×315」「640×360」「853×480」「1280×720」「カスタムサイズ」の中から動画のサイズを選択できます。
また、動画のアスペクト比は16対9になっています。

動画が終わったら関連動画を表示

ブログに入れるのでしたら、表示しないほうがYouTubeへ行かれないかもしれません。

プレーヤーのコントロールを表示

表示しないと、ブログなどで見てもらった場合、どうしてよいのか分からない人もいると思います。

動画のタイトルとプレーヤーの操作を表示

動画の上部に表示されるタイトル等です。

プライバシー強化モードを有効

プライバシー強化モードを有効にすると、ウェブサイトの訪問者が動画を再生しない限り、訪問者に関する情報は YouTube に保存されないとのことです。

ほとんどの人がこの設定を有効にしていないと思いますので、ここはあまり気にしないでも良いと思います。

これらのチェックをするとコードに反映しますので、コピーペーストします。

コードの仕組みを確認しておく

取得した埋め込みコード

動画が終わったら関連動画を表示する
プレーヤーのコントロールを表示する
動画のタイトルとプレーヤーの操作を表示する

src=”https://www.youtube.com/embed/sIgawh0g-PI”

この３つにチェックを入れたのが、コードに何も付加されていない状態

動画が終わったら関連動画を表示する
チェックを外すと

src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0”

プレーヤーのコントロールを表示する
チェックを外すと

src=”https://www.youtube.com/embed/sIgawh0g-PI?controls=0”

動画のタイトルとプレーヤーの操作を表示する
チェックを外すと

src=”https://www.youtube.com/embed/sIgawh0g-PI?showinfo=0“

３つともはずすと

このコードをベースにやりたいことを追加する

これらの利用頻度が高いと思います。

自動再生

autoplay=1
値: 0 または 1
動画が自動的に再生されますので、使う動画によっては注意してください。

〇〇秒よりスタート

start=秒数
値: 正の整数
動画の先頭から指定された秒数分進めた位置から再生されます。

●●秒で終わる

end=秒数
値: 正の整数
動画の先頭から測定し、再生を停止します。

ループ再生

loop=1
値: 0 または 1
1 を設定すると
最初の動画が繰り返し、再生されます。

尚、このパラメータを単一動画に使うには

loop=1&playlist=VIDEO_ID

このように「 playlist 」パラメータとセットでの利用になります。

startパラメータが設定してあっても、ループ再生時には頭からのスタートになります。

これらは、複合して利用できます。

尚、上記のパラメータはすべて省略可能です。

これら以外の使えるパラメータ

ちなみに、こんなパラメータがあるよというレベルの説明ですが、気になるものがあれば調べてご利用ください。

cc_load_policy：字幕表示
color：プレーヤーの動画進行バーに動画を開始してからの経過時間を示すときに使用する色を指定
disablekb：キーボード操作の有効無効
enablejsapi：JavaScript API が有効無効
fs：全画面表示ボタンを表示の有無
hl：プレーヤーのインターフェースの言語を設定
iv_load_policy：動画アノテーション表示
list：プレーヤーに読み込むコンテンツを識別するときに、listType パラメータと組み合わせて使用
listType：レーヤーに読み込むコンテンツを識別するときに list パラメータと組み合わせて使用
modestbranding：YouTube ロゴを表示の有無
origin： IFrame API のセキュリティを強化
playlist：再生する動画 ID をカンマで区切ったリスト
playsinline：このパラメータは iOS 上の HTML5 プレーヤー制御

実際のコードの書き方を確認

前述のYouTubeから取得したコードの動画を示す部分

src=”https://www.youtube.com/embed/sIgawh0g-PI”

sIgawh0g-PIの部分はVIDEO_IDなので以下のように簡略化して説明します。

src=”https://www.youtube.com/embed/VIDEO_ID”

この部分にパラメータと値を加えていきます。

「?」を加えてからになります。

src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ＝値”

複数のパラメータを加えたい場合は「&」で繋げます。

src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値”

YouTubeからコードを取得すると「&」部分が「&」となっているかと思います。

HTMLのソース表記で「&」と記載してブラウザで見ると「&」と表示されるはずです。

ブログのエディターなどで、うまく動画が表示されない場合のみ注意してみてください。

「&」と記載して問題が無いですが、念のため覚えておいてください。

実際に記載する場合は以下のようになります。

まとめ

基本的な埋め込み方法は次のとおり

埋め込みたい動画を選ぶ
検索するなどブログ等に埋め込みたい動画を選んでください。
埋め込みコードの取得
動画ページ上で提供されているコードのアレンジ

YouTube上で、以下の設定が可能

動画のサイズを指定
動画が終わったら関連動画を表示
プレーヤーのコントロールを表示
動画のタイトルとプレーヤーの操作を表示
プライバシー強化モードを有効

これらのチェックをするとコードに反映します。

そのコードをメモ帳などのエディターにコピーペーストしておきます。

例：<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&loop=1&playlist=sIgawh0g-PI” frameborder=”0″ allowfullscreen></iframe>

そして、このコードをベースにやりたいことを追加する

自動再生

autoplay=1

〇〇秒よりスタート

start=秒数

●●秒で終わる

end=秒数