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

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

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

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

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

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

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

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

動画のサイズを指定

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

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

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

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

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

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

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

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

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

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

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

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

取得した埋め込みコード

<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI” frameborder=”0″ allowfullscreen></iframe>

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

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

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

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

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

3つともはずすと

<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&amp;controls=0&amp;showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

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

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

自動再生

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からコードを取得すると「&」部分が「&amp;」となっているかと思います。

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

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

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

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

<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen></iframe>

まとめ

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

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

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

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

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

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

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

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

自動再生

autoplay=1

〇〇秒よりスタート

start=秒数

●●秒で終わる

end=秒数

ループ再生

loop=1
このパラメータを単一動画に使うには
loop=1&playlist=VIDEO_ID
このように「 playlist 」パラメータとセットでの利用になります。

埋め込みコードの動画を示す部分の例

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

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

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

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

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

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

<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen></iframe>