YouTube埋め込み時に便利なパラメータ 10+

  • Posted on
  • Category : Tips
YouTube埋め込み時に便利なパラメータ 10+

サイトにYouTube動画を表示したいと思った時、イベントを絡めるといったようなカスタマイズをしてとかになるとAPIを使用したりになると思いますが、とりあえず表示するだけであればiframeで簡単に埋め込むことができます。そんな時に知っておくと便利なパラメータ10種類を自分が使用頻度が高いと思う組み合わせ3つと併せて紹介します。

はじめに…

どのように表示されるかわかりやすいように実際にこのページに動画を埋め込もうかとも考えたのですが、ページがかなり重くなってしまうので以下ではコードのみ紹介しています。
実際の表示を確認したい場合は、適当な動画で「JSFiddle」などのツールを使ったり、テスト用のHTMLなどを用意して表示確認を行ってください。

YouTubeの動画を埋め込む方法

YouTubeの動画を埋め込む方法

単純に動画を埋め込みたい際は、上のキャプチャのように動画下にある「共有 > 埋め込みコード」から表示に必要なiframeのコードを取得し、あとはそのコードを表示させたい箇所に貼り付ければ埋め込むことができます。
動画サイズも設定することができ、予め選択できる4種類の動画サイズと任意で大きさを決められる「カスタム サイズ」が用意されています。

使用する基本コード

このエントリーではサンプルとして以下のコードを使用していきます。

<iframe src="//www.youtube.com/embed/xxx" width="560" height="315" frameborder="0" allowfullscreen></iframe>

赤字部分はそれぞれ設置する際に変更を行う箇所で、widthheightは動画の幅と高さの指定、srcの末尾にあるxxxの部分には埋め込みたい動画コードを記述します。
残りのframeborder="0"allowfullscreenについてはコードを見ての通りですが、それぞれプレーヤーの枠線とフルスクリーンに関しての記述となります。
何か特別な理由(よくあるのだとバリデーションなど)がある場合はこの部分は削除したりすることもありますが、今回は記述した状態で使用します。

YouTube埋め込み時に便利なパラメータ 10+ 目次

  1. 自動再生
  2. スタート位置を指定
  3. ストップ位置を指定
  4. 関連動画の表示・非表示
  5. コントロールの表示・非表示
  6. コントロールを常に表示
  7. 動画タイトルや評価情報などの表示・非表示
  8. フルスクリーンボタンの表示・非表示
  9. YouTubeロゴの表示・非表示
  10. テーマ & プログレスバーのカラー変更
  11. パラメータの複数指定
    1. 自動再生 & 関連動画非表示
    2. 動画を部分的に再生 & 関連動画非表示
    3. 自動再生 & 関連動画非表示 & 上下バーを非表示

1. 自動再生

デフォルトではページが表示された(プレーヤーが読み込まれた)際には動画再生がされていませんが、「autoplay」を使うことでページ表示(プレーヤー読み込み)と同時に自動的に再生をさせることができます。
記述はsrcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:自動再生されない(デフォルト)
  • 1:自動再生される

目次へ

2. スタート位置を指定

デフォルトでは先頭から再生されますが、「start」を使うことで指定した秒数進んだ位置から動画を再生をさせることができます。
値を指定は正の整数で記述し、例えば60秒から動画を再生させたい場合はsrcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?start=60" width="560" height="315" frameborder="0" allowfullscreen></iframe>

目次へ

3. ストップ位置を指定

先ほどとは逆で、通常は最後まで再生され続けるのを「end」を使うことで指定した秒数で停止をさせることができます。
値を指定は同じく正の整数で記述し、例えば60秒後に動画を停止させたい場合はsrcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?end=60" width="560" height="315" frameborder="0" allowfullscreen></iframe>

目次へ

4. 関連動画の表示・非表示

記事冒頭にあるサンプルソースをそのまま使用した場合、動画の再生後に関連動画が出てくるのですが、それの表示・非表示を制御する方法です。
場合によってはそのまま使用することもあるかもしれませんが、ほとんどの場合は意図しないものが表示される理由などで非表示にしたいことが多いと思います。
表示・非表示を制御するには「rel」を使用し、関連動画を非表示にしたい場合はsrcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?rel=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:関連動画を非表示
  • 1:関連動画を表示(デフォルト)

※このパラメータに関しては、YouTubeの埋め込みコード部分に「動画が終わったら関連動画を表示する」という項目があるので、その項目のチェックを外せば?rel=0が追記されたコードが出力されます。

目次へ

5. コントロールの表示・非表示

コントロールの表示・非表示

デフォルトでは画像のように再生・音量・残りの秒数などといった項目が表示されているコントロール部分は、「controls」を使うことで表示・非表示を制御することができます。
コントロールを非表示にしたい時は、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?controls=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:非表示
  • 1:表示(デフォルト)

目次へ

6. コントロールを常に表示

デフォルトでは動画を再生後にプレーヤーからマウス(フォーカス)を外すとコントロール部分は自動的に隠れて、再度プレーヤーにマウスを持っていくとコントロールが表示されるという動きですが、「autohide」を使うことで制御することができます。
コントロールを常に表示させたい時は、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?autohide=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:コントロールが常に表示
  • 1:コントロールが自動的に隠れる(デフォルト)
  • 2:プログレスバーを目立たなくする

記述を?autohide=2にした場合は、?autohide=0と同様にコントロールが常に表示されつつ、プログレスバーのみが少し目立たなくなるという動きになります。

目次へ

7. 動画タイトルや評価情報などの表示・非表示

動画タイトルや評価情報などの表示・非表示

デフォルトでは画像のようにプレーヤー上部に動画タイトルや評価情報などが表示されますが、「showinfo」を使うことで表示・非表示を制御することができます。
タイトルや評価情報などを非表示にしたい時は、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?showinfo=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:非表示
  • 1:表示(デフォルト)

目次へ

8. フルスクリーンボタンの表示・非表示

フルスクリーンボタンの表示・非表示

デフォルトでは画像のようにプレーヤー右下にフルスクリーンボタンが表示されますが、「fs」を使うことで表示・非表示を制御することができます。
フルスクリーンボタンを非表示にしたい時は、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?showinfo=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:非表示
  • 1:表示(デフォルト)

※この方法は単純にボタンを非表示にするだけであって、フルスクリーンが無効になったわけではありません。
ボタンは非表示でもプレーヤーをダブルクリックするとフルスクリーン表示にはなるので、それも制限したいという場合は他にも手を加える必要があります。

目次へ

9. YouTubeロゴの表示・非表示

YouTubeロゴの表示・非表示

デフォルトでは画像のようにコントロールバーにYouTubeロゴが表示されますが、「modestbranding」を使うことで表示・非表示を制御することができます。
YouTubeロゴを非表示にしたい時は、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?modestbranding=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  • 0:表示(デフォルト)
  • 1:非表示

※この方法を使うことでプレーヤー右下のロゴは非表示になりますが、完全に非表示にしたわけではなく移動するという感じになります。
上記を記述した場合は、コントロールバーのロゴが非表示になるかわりにタイトルなどを表示するプレーヤー上部に「YouTube」という文字が出るようになり、modestbranding=1とタイトルなどを非表示にするshowinfo=0を併せて記述した場合、動画の右下部分にロゴが表示されるようになります。

目次へ

10. テーマ & プログレスバーのカラー変更

デフォルトではコントロールバーは黒、プログレスバーは赤

デフォルトではコントロールバーは黒、プログレスバーは赤のカラーが適応されていますが、コントロールバーは「theme」、プログレスバーは「color」を使うことでそれぞれカラー変更することができます。
それぞれの値は以下のようになっています。

themeの値

  • dark:黒(デフォルト)
  • white:白

colorの値

  • red:赤(デフォルト)
  • white:白

記述の仕方は今までのものと変わらずに記述をしていきます。
例えばコントロールバーを白に変更したもの、プログレスバーを白にしたものをそれぞれ記述する際は、srcの末尾に以下のように記述します。

<!-- コントロールバー カラー変更 -->
<iframe src="//www.youtube.com/embed/xxx?theme=light" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<!-- プログレスバー カラー変更 -->
<iframe src="//www.youtube.com/embed/xxx?color=white" width="560" height="315" frameborder="0" allowfullscreen></iframe>

それぞれを適応させた見栄え

詳しくは後述しますが、パラメータは同時に記述することもできるので「theme」と「color」を併せて使用することもできます。
あくまで簡易的な感じではありますが、下記のように少しの記述で見栄えを変更できるので、動画やサイトの雰囲気によって合わせることができます。
それぞれの組み合わせ時の見栄えや記述は以下になります。

「theme」と「color」の組み合わせ例
<!-- コントロールバー:黒 プログレスバー:赤 (デフォルト) -->
<iframe src="//www.youtube.com/embed/xxx?theme=dark&color=red" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<!-- コントロールバー:白 プログレスバー:赤 -->
<iframe src="//www.youtube.com/embed/xxx?theme=white&color=red" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<!-- コントロールバー:黒 プログレスバー:白 -->
<iframe src="//www.youtube.com/embed/xxx?theme=dark&color=white" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<!-- コントロールバー:白 プログレスバー:白 -->
<iframe src="//www.youtube.com/embed/xxx?theme=white&color=white" width="560" height="315" frameborder="0" allowfullscreen></iframe>

目次へ

11. パラメータの複数指定

上記ではほとんどパラメータを単独で指定していますが、先ほどの「10. テーマ & プログレスバーのカラー変更」のようにパラメータの複数指定をすることもできます。
パラメータを複数指定する場合は、パラメータとパラメータの間に「&」を記述します。

以下はそれぞれパラメータを複数指定した際のサンプルで、個人的に今まで使ってきて使用頻度が高いと感じた組み合わせになります。(もっと便利な組み合わせとか面白い組み合わせがあれば是非教えてください)

11-1. 自動再生 & 関連動画非表示

ページ表示(プレーヤー読み込み)と同時に自動的に再生をさせて、最後に関連動画を表示させないという指定になります。
srcの末尾に以下のようにして記述します。

<iframe src="//www.youtube.com/embed/xxx?rel=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

11-2. 動画を部分的に再生 & 関連動画非表示

動画全部を再生させるのではなく、スタート位置とストップ位置を同時に指定することで動画を部分的に再生させるように見せて、上と同じく関連動画を表示させないという指定になります。
部分的にしか見せたくないなら最初からその部分だけで動画を作ればと思いますが、そうもいかない場合などに…。

例えば動画の60秒後~180秒までの部分を再生させるという場合は、srcの末尾に以下のようにして記述します。

<iframe src="//www.youtube.com/embed/xxx?rel=0&start=60&end=180" width="560" height="315" frameborder="0" allowfullscreen></iframe>

11-3. 自動再生 & 関連動画非表示 & 上下バーを非表示

自動再生と関連動画非表示を組み合わせ、更にタイトルやコントロールなどの上下バーも非表示にします。
マウスオン時にYouTubeロゴが画面右下に出ますが、パッと見はYouTubeだと思わせない感じにすることができます。
srcの末尾に以下のようにして記述します。

<iframe src="//www.youtube.com/embed/xxx?rel=0&autoplay=1&controls=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>

目次へ

以上、YouTube埋め込み時に便利なパラメータの紹介でした。
他にも便利なパラメータは幾つかあり、例えばキーボード操作を無効にする「disablekb」や動画を繰り返し再生させる「loop」などもあります。
冒頭にも書きましたが、もっとカスタマイズをするようなものだとAPI使うことが多いと思いますが、このエントリーで紹介してきたような簡易的なものであればパラメータを組み合わせるだけでもいろいろとできるので、ノンプログラマやプログラミングが苦手な人でも簡単に実装できると思います。

パラメータについてもっと詳しく知りたい方は以下の公式サイトで確認でき、APIなどについての情報も確認できます。

Back to Top

YouTube埋め込み時に便利なパラメータ 10+

YouTube埋め込み時に便利なパラメータ 10+

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。