ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。
また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤーなどの情報についてもお話します。
さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。
「パラメータ」をつかうと、どんなことができるの?
まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。
実例1: 自動的に再生が始まり、巻き戻しや、早送りはできない
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
これによって、自動的に再生が始まり、操作は一時停止しかできないため、巻き戻しや、早送りはできません。
(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)
この動画の埋め込みコード
実例2: コントロールバーを非表示にする
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
実例3: 複数の動画を連続して再生させ、それを繰り返す
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
実例4: 一部分だけを再生する
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。
各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。
もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。
- 「パラメータ」をつかうと、どんなことができるの?
- 埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
- 「パラメータ」の使い方
- 再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
- コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
- 自動的に再生を始める - 「autoplay」(オートプレイ)
- 繰り返し再生させる - 「loop」(ループ)
- コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
- 全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
- iOS 上で動画をインライン表示で再生させる - 「playsinline」(プレイズインライン)
- タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
- 再生を開始する位置を指定する – 「start」(スタート)
- 再生を終了する位置を指定する – 「end」(エンド)
- 「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
- 複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
- 「進行状況バー」(プログレスバー、シークバー)の色を変える - 「color」(カラー)
- 「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
- キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
- 字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
- 「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
- 動画プレーヤーのユーザーインターフェース上に表示される言葉の言語を指定する - 「hl」(ホストランゲージ)
- (参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
- (参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
- (廃止)コントロールバーと「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
- (廃止)最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
- (参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
- 動画プレーヤーを制御するための3つのAPI
- 参考サイト、YouTube公式ヘルプページ
- おもしろい組み合わせ方を思いついたら、ぜひ教えてください
埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
YouTubeの動画プレーヤーの埋め込みコードのタグには、つぎの2つの種類があります。
- <iframe>タグ(HTML5形式 & Flash形式)
- (非推奨)<object>タグ(Flash形式)
<iframe>タグは、HTML5形式とFlash形式の2種類の動画プレーヤーを表示させることができます。
<object>タグは、Flash形式の動画プレーヤーしか表示させることができません。
(Flash形式の埋め込み動画プレーヤーは、非推奨です。)
YouTubeが推奨しているのは、<iframe>タグの埋め込みコードをつかって、HTML5形式の動画プレーヤーを表示させることです。
その理由は、HTML5形式の動画プレーヤーを利用すると、視聴者の閲覧環境(パソコンやスマートフォンなど)に合わせて適切な設定が自動的に選択されるというメリットや、YouTubeのファイル形式も利用できるというメリットがあるからです。
なお、HTML5形式の動画プレーヤーを利用している場合は、視聴者の閲覧環境(ウェブブラウザ)がHTML5を利用できる環境であればHTML5形式の動画プレーヤーを表示させ、そうでない場合は、代わりにFlash形式の動画プレーヤーを表示させるようになっています。
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
HTML5形式の埋め込み動画プレーヤー
HTML5形式の埋め込み動画プレーヤーでは、埋め込みコードの<iframe>タグの「src」の値として指定する「YouTube動画のURL」の形式は、「 https://www.youtube.com/embed/動画ID」という形式になります。
ちなみに、「src」は、「源」や「起源」という意味の「source」(ソース)の略です。
YouTube動画の「動画ID」というのは、YouTube動画の個別視聴ベージのURLのなかの「v=***********」という部分の「***********」の英数字のことです。
下の例でいうと、「Uu9-Edqgdm0」という部分が、「動画ID」です。
YouTube動画の個別視聴ベージのURLの例
https://www.youtube.com/watch?v=Uu9-Edqgdm0&feature=player_embedded
HTML5形式の埋め込み動画プレーヤーのURLの実例
「 https://www.youtube.com/embed/動画ID 」
https://www.youtube.com/embed/Uu9-Edqgdm0
(非推奨)Flash形式の埋め込み動画プレーヤー - 「Flash(AS3)プレーヤー」
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
YouTubeのFlash形式の動画プレーヤーは、「Flash(AS3)プレーヤー」と呼ばれます。
「AS3」というのは、Flashを操作するためにつかわれるプログラミング言語「ActionScript」(アクションスクリプト)のバージョン3.0の略です。
(同様に、「AS2」というものもあります。こちらは、旧式の「ActionScript バージョン2.0」の略です。「AS2」形式の埋め込み動画プレーヤーは、YouTubeでは非推奨(廃止予定)になっています。)
「Flash(AS3)プレーヤー」では、埋め込みコードのなかの「src」の値として指定する「YouTube動画のURL」の形式は、「 https://www.youtube.com/v/動画ID?hl=ja&version=3 」という形式になります。
「version=3」の部分で、「AS3」(「ActionScript バージョン3.0」)を利用するということを指定しています。
「hl=ja」という部分では、動画プレーヤーでつかわれる言語を指定しています。「hl」(言語設定)の値は、「ja_JP」(日本語)にします。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)のURLの実例
「 https://www.youtube.com/v/動画ID?hl=ja&version=3 」
https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3
<iframe>タグ(HTML5形式 & Flash形式)
<iframe>タグは、HTML5形式の動画プレーヤーと、Flash形式の動画プレーヤーの、2種類の動画プレーヤーを表示させることができます。
(Flash形式の埋め込み動画プレーヤーは、非推奨です。)
<iframe>タグ(HTML5形式の動画プレーヤーの場合)
(非推奨)<iframe>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」)の場合)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
(非推奨)<object>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」))
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
「パラメータ」の使い方
YouTubeの動画プレーヤーは、埋め込みコードのなかの「src」の項目の値として指定する「動画のURL」の後ろに、「パラメータ」と呼ばれる文字列をつけることができます。
この「パラメータ」をつけることで、埋め込んだ動画プレーヤーの見た目や機能をカスタマイズすることができます。
表示させるYouTube動画のURLを指定する「src」の項目に設定する値(「動画のURL」)の文字列の最後に「?」をつけて、そのうしろに設定したい機能の「パラメータ」をつけます。
「src」は、「源」や「起源」という意味の「source」(ソース)の略です。
「パラメータ」は複数設定することができます。複数設定するときは、「パラメータ」と「パラメータ」のあいだに「&」(「アンド」マーク(アンパサンド))を入れます。複数の「パラメータ」を並べる順番は、どんな順番でもかまいせん。
なお、「パラメータ」の機能を利用するためには、埋め込む動画プレーヤーの縦横のサイズを、最低でも縦200ピクセル×横200ピクセル以上にする必要があります。
下記は、複数の「パラメータ」をつけたときの埋め込みコードの実例です。
テンプレート
テンプレートに実際の値を入れた実例
上記の埋め込みコードをつかって表示させた動画プレーヤー
再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
「rel」: 「Related Videos」(「リレイテッドビデオ」(「関連動画」という意味))
「rel」のパラメータを設定することによって、動画の再生が終わったあとに表示される「関連動画」の表示/非表示を指定することができます。
「rel」の値を「0」にすると、「関連動画」を非表示にすることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「1」)
「rel=0」(「関連動画」を非表示にする)
「rel=1」(「関連動画」を表示する)
コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
「modestbranding」: 「Modest Branding」(「モデストブランディング」(「控えめなブランドアピール」というような意味です。))
「modestbranding」のパラメータを設定することによって、コントロールバーの右端のYouTubeのロゴの表示/非表示を指定することができます。
「modestbranding」の値を「1」にすると、コントロールバーの右端のYouTubeのロゴが表示されなくなります。
その代わり、動画を再生する前や、動画の再生中にマウスを画面の上に移動させた時、動画を一時停止した時に、動画の右上の角に小さな文字で「YouTube」という文字が表示されます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1(初期値は「0」)
「modestbranding=1」(コントロールバーのYouTubeロゴを非表示にする)
「modestbranding=0」(コントロールバーのYouTubeロゴを表示する)
自動的に再生を始める - 「autoplay」(オートプレイ)
「autoplay」: 「Auto Play」(「オートプレイ」(「自動的に再生する」という意味))
「autoplay」の値を「1」にすることで、ウェブページが表示されると同時に、自動的に動画を再生させることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「0」)
(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)
繰り返し再生させる - 「loop」(ループ)
「loop」: 「ループ」(「一巡して元にもどる」という意味)
「loop」の値を「1」にすると、その動画を繰り返し再生させることができます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1(初期値は「0」)
「再生リスト」(プレイリスト)の埋め込み動画プレーヤーの場合は、「loop」の値を「1」にすると、その「再生リスト」に含まれているすべての動画の再生が終わったあと、また最初の動画にもどって再生が始まるといったぐあいに、「再生リスト」全体が繰り返し再生されることになります。
(「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
通常の動画プレーヤーで「loop」をつかう場合
「loop」パラメータは、 AS3 プレーヤーと埋め込み IFrame でのみサポートされており、AS3 または HTML5 プレーヤーのいずれかが読み込まれます。
単一の動画をループさせる場合は、「loop」パラメータの値を「1」に設定すると同時に、その動画の「動画ID」を、再生リストのパラメータである「playlist」パラメータの値にも設定します。
つまり、「おなじ動画が2つ設定されている再生リスト」をつくり、その再生リストをループ再生させるということです。
「再生リスト」の動画プレーヤーで「loop」をつかう場合
「再生リスト」(プレイリスト)の動画プレーヤーには、つぎの2種類があります。
- HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤー
- (非推奨)Flash形式(<object>タグ)の「再生リスト」の動画プレーヤー
HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
(非推奨)Flash形式(<object>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID(1)?hl=ja&version=3&loop=1&playlist=動画ID(2),動画ID(3)"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID(1)?hl=ja&version=3&loop=1&playlist=動画ID(2),動画ID(3)" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&loop=1&playlist=nFv7OhZWRSI,Imj1mR4-yM8"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&loop=1&playlist=nFv7OhZWRSI,Imj1mR4-yM8" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
「controls」: 「Controls」(「コントロールズ」(動画を制御するためのボタンなどの視覚的要素のこと))
「controls」のパラメータを設定することによって、コントロールバーの表示/非表示を指定することができます。
また、「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーをどのタイミングで読み込むかを指定することができます。
(Flash形式の埋め込み動画プレーヤーは、非推奨です。)
「コントロールバー」というのは、動画の下についている、「再生」ボタンや「一時停止」ボタン、動画再生の進行状況を示す「プログレスバー」(シークバー)、「経過時間表示」、「音量調節」、「全画面表示」ボタンなどがついている、「動画の再生について操作することができる部分」のことです。
ちなみに、「コントロールバー」は、英語では、「player control bar」(プレーヤー・コントロールバー)や「player controls」(プレーヤー・コントロールズ)などと呼ばれます。
「controls」の値を「0」にすると、コントロールバーが非表示になります。「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーがただちに読み込まれます。
「controls」の値を「1」にすると、コントロールバーが表示されます。「Flash(AS3)プレーヤー」の場合は、Flash形式の動画プレーヤーがただちに読み込まれます。
「controls」の値を「2」にすると、コントロールバーが表示されます。「Flash(AS3)プレーヤー」の場合は、視聴者が動画の再生を開始したあとで、Flash形式の動画プレーヤーが読み込まれます。
「controls」の値が「1」の場合と「2」の場合をくらべると、動画プレーヤーの見た目はほぼおなじです。「1」と「2」の違いは、値を「2」にした場合のほうが、「1」にした場合よりもパフォーマンスが向上するという点です。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 0, 1, 2(初期値は「1」)
「controls=0」(コントロールバーを非表示にする)
(非推奨)「controls=1」(コントロールバーを表示する)(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
(非推奨)「controls=2」(コントロールバーを表示する & パフォーマンス向上)(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
「fs」: 「Full Screen」(「フルスクリーン」の略)
「fs」の値を「0」にすると、コントロールバーのなかの右端についている「全画面表示」のボタンを非表示にすることができます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「1」)
「fs」をHTML5形式の動画プレーヤーでつかう
「fs」のパラメータは、<iframe>タグのHTML5形式の動画プレーヤーでも機能します。
ただ、この場合は、「fs=0」は、あくまでも、「全画面表示ボタンを非表示にする」というだけで、「全画面表示ができないようにする」ということではありません。ですので、「fs」の値を「0」にしても、動画の画面をダブルクリックすると全画面表示にすることができます。
全画面表示ができないようにしたい場合は、埋め込みコードのなかの「allowfullscreen」(「Allow Fullscreen」(「アラウフルスクリーン」))という文字列を消す必要があります。
「fs=0」(全画面表示ボタンを非表示にする)(HTML5形式の動画プレーヤーの場合)
「fs=0」(全画面表示ボタンを非表示にする & 全画面表示ができないようにする)(HTML5形式の動画プレーヤーの場合)
上記の、「fs=0」を設定したHTML5形式の動画プレーヤーの埋め込みコードのなかの「allowfullscreen」(「Allow Fullscreen」(「アラウフルスクリーン」))という文字列を消すと、全画面表示ができないようになります。
なお、埋め込みコードのなかに「allowfullscreen」が入っていない場合は、「fs」の値を「0」に設定しなくても全画面表示ボタンは非表示になります。
(非推奨)「fs=0」(全画面表示ボタンを非表示にする)(「Flash(AS3)プレーヤー」)の場合)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
(非推奨)「fs=1」(全画面表示ボタンを表示する)(「Flash(AS3)プレーヤー」)の場合)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
iOS 上で動画をインライン表示で再生させる - 「playsinline」(プレイズインライン)
「playsinline」のパラメータを設定することによって、iOS 上の HTML5形式の動画プレーヤーの動画が、インライン表示か、全画面表示の、どちらで再生するかを指定することができます。
「playsinline」: 「Plays Inline」(「プレイズ・インライン」(「インライン表示で再生する」という意味))
ここで言う「インライン表示で再生する」という言葉の意味は、「動画が再生されるときに全画面表示にならずに再生される」という意味です。
設定できる値: 0, 1(初期値は「0」)
「playsinline」の値を「0」にすると、全画面表示で再生されます。現時点ではこれがデフォルト値ですが、デフォルトは変更される場合があります。
「playsinline」の値を「1」にすると、UIWebViews(allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの)がインライン再生されます。
「playsinline=1」(iOS 上で動画を、インライン表示で再生させる)
「playsinline=0」(iOS 上で動画を、全画面表示で再生させる)
タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
「showinfo」: 「Show Information」(「ショウインフォメーション」)の略(「動画についての情報を表示する」といった意味)
「showinfo」の値を「0」にすると、タイトルバーを非表示にすることができます。
(タイトルバーというのは、動画プレーヤーの画面の上部にあって、「動画タイトル」や、「高評価」、「低評価」、「共有する」、「詳細」のアイコンなどが表示される黒いバーのことです。)
また、YouTube動画の「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込み、なおかつ、明示的に「showinfo」の値を「1」に設定している場合(「showinfo=1」という文字列を埋め込みコードのなかに入れている場合)、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
この機能は、「再生リスト」を読み込むことができる「Flash(AS3)プレーヤー」(Flash形式の動画プレーヤー)の場合だけ利用できます。
(「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「1」)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
「showinfo=0」(タイトルバーを非表示にする)
「showinfo=1」(「再生リスト」のサムネイルを表示させる)(「再生リスト」の動画プレーヤーの場合)
「再生リスト」(プレイリスト)の動画プレーヤーの場合、埋め込みコードの「list=」の後ろの「リストID」の部分には、表示させたい「再生リスト」の「リストID」をいれます。
表示させたい「再生リスト」の「リストID」を取得するためには、YouTubeのウェブサイト内のその「再生リスト」のページを表示させて、そのページのURLのなかの「list=」という文字よりも後ろの部分の「PL」で始まる文字列を見ます。この「PL」で始まる文字列がその「再生リスト」の「リストID」です。
下の「再生リスト」のページの例でいうと、「PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb」という部分が、この「再生リスト」の「リストID」です。
「再生リスト」(プレイリスト)のページのURLの形式
https://www.youtube.com/playlist?list=リストID
「再生リスト」(プレイリスト)のページのURLの実例
https://www.youtube.com/playlist?list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb
「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むと、コントロールバーのなかに「再生リスト」(「Playlist」)というボタンが表示されます。この「再生リスト」(「Playlist」)ボタンを押すと、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)の表示/非表示を切り替えることができます。
(参考)(非推奨)「showinfo」を明示的に設定しない場合(「再生リスト」のサムネイルを表示しない)(「再生リスト」の動画プレーヤーの場合)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
下のYouTube動画は、「showinfo」のパラメータを設定していない場合の「Flash(AS3)プレーヤー」形式の「再生リスト」(プレイリスト)の動画プレーヤーの実例です。
「showinfo」の初期値は「1」なので、埋め込みコードのなかに「showinfo=1」という文字列を書き込まなくても、自動的に「showinfo=1」という設定が適用されます。
ですが、「Flash(AS3)プレーヤー」形式の「再生リスト」の動画プレーヤーの場合、再生する前の画面に「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)を表示させるには、明示的に「showinfo」の値を「1」に設定する必要があります(「showinfo=1」という文字列を埋め込みコードのなかに入れる必要があります)。
しかし、下の例では、明示的に「showinfo」の値を「1」に設定していないので(「showinfo=1」という文字列を埋め込みコードのなかに入れていないので)、上の実例のように明示的に「showinfo=1」に設定した場合のものとは違って、こちらの場合は、再生する前の画面に「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)は表示されません。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&list=リストID&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&list=リストID&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
再生を開始する位置を指定する – 「start」(スタート)
「start」: 「スタート」(「開始位置」という意味)
「start」のパラメータを設定することによって、動画の再生が開始される位置をあらかじめ設定しておいて、その位置から再生を開始させることができます。
動画の開始位置の指定は、動画の冒頭から再生を開始させる位置までの経過時間(秒数)で指定します。
なお、動画のキーフレームと経過時間の秒数は完全に一致するわけではないので、場合によっては、指定した位置から再生が開始されるまでに最大で2秒ほどかかることもあります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 正の整数(秒数の数字)
下の動画では、「0:14」の時点から再生を開始させているので、「start」の値には「0分14秒」を秒数になおした「14」(秒)という数字を指定しています。
ちなみに、もしも、「5:25」の時点から再生を開始させる場合は、「start」の値には「5分25秒」を秒数になおした「325」(秒)という数字を指定します。
再生を終了する位置を指定する – 「end」(エンド)
「end」: 「エンド」(「終了位置」という意味)
「end」のパラメータを設定することによって、動画の再生が終了する位置をあらかじめ設定しておいて、その位置で再生を終了させることができます。
動画の終了位置の指定は、動画の冒頭から再生を終了させる位置までの経過時間(秒数)で指定します。
「end」のパラメータがつかえるのは「Flash(AS3)プレーヤー」の場合だけです。
「end」のパラメータは、HTML5形式の動画プレーヤーで利用できます。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 正の整数(秒数の数字)
下の動画では、「00:28」の時点で再生を終了させているので、「end」の値には「00:28」を秒数になおした「28」(秒)という数字を指定しています。
ちなみに、もしも、「5:25」の時点で再生を終了させる場合は、「end」の値には「5分25秒」を秒数になおした「325」(秒)という数字を指定します。
「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
「listType」: 「リストタイプ」(「動画リストの種類」)
「list」: 「リスト」(「(対象となる)動画リスト」)
対象となる動画プレーヤーのタイプ(「listType」): AS3, HTML5
対象となる動画プレーヤーのタイプ(「list」): AS3, HTML5
設定できる値(「listType」): playlist, user_uploads, search
設定できる値(「list」): 「再生リスト」の「リストID」, YouTubeユーザー名(半角英数字), 検索キーワード
「listType」と「list」の2つのパラメータをつかうと、つぎのような、複数のYouTube動画をひとつにまとめた動画リストを動画プレーヤーとして埋め込むことができます。
- 「再生リスト」(「playlist」)
- 公開動画リスト(「user_uploads」)
- 動画検索結果リスト(「search」)
「listType」の値を「playlist」(プレイリスト)(「再生リスト」)にして、「list」の値に「再生リスト」の「リストID」をいれると、「再生リスト」を動画プレーヤーとして埋め込むことができます。
「listType」の値を「user_uploads」(「公開動画リスト」)にして、「list」の値にYouTubeユーザー名(半角英数字)をいれると、そのユーザーがYouTubeで公開している動画のリストを動画プレーヤーとして埋め込むことができます。
「listType」の値を「search」(「動画検索結果リスト」)にして、「list」の値に検索キーワードをいれると、そのキーワードでYouTube動画検索をかけた検索結果の動画のリストを動画プレーヤーとして埋め込むことができます。
これらの動画のリストの埋め込みプレーヤーは、「Flash(AS3)プレーヤー」形式にします。
これらの動画のリストの埋め込みプレーヤーは、<iframe>タグの埋め込みコードをつかったHTML5形式の動画プレーヤーにします。
HTML5形式の動画プレーヤー(<iframe>タグ)をつかった「再生リスト」の動画プレーヤー
「再生リスト」(プレイリスト)の動画プレーヤーは、<iframe>タグの埋め込みコードをつかったHTML5形式の動画プレーヤーにします。
「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。
(「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
この「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むためには、埋め込みコードの「src」の値を「src」の値を下記のような形式にします。
「 https://www.youtube.com/embed?listType=playlist&list=リストID 」
このなかの「リストID」の部分には、表示させたい「再生リスト」(プレイリスト)の「リストID」をいれます。
表示させたい「再生リスト」の「リストID」を取得するためには、YouTubeのウェブサイト内のその「再生リスト」のページを表示させて、そのページのURLのなかの「list=」という文字よりも後ろの部分の「PL」で始まる文字列を見ます。この「PL」で始まる文字列がその「再生リスト」の「リストID」です。
下の「再生リスト」のページの例でいうと、「PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb」という部分が、この「再生リスト」の「リストID」です。
「再生リスト」(プレイリスト)のページのURLの形式
https://www.youtube.com/playlist?list=リストID
「再生リスト」(プレイリスト)のページのURLの実例
https://www.youtube.com/playlist?list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb
「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むと、動画の画面の左上のところに「再生リスト」(「Playlist」)のアイコンが表示されます。この「再生リスト」(「Playlist」)のアイコンを押すと、動画の画面のなかにその「再生リスト」に含まれている動画の一覧リストが表示されます。
下の動画はその実例です。
(非推奨)Flash形式の動画プレーヤー(<object>タグ)をつかった「再生リスト」の動画プレーヤー
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
「再生リスト」というのは、任意のYouTube動画を集めたリストをつくることができるという、YouTubeの機能のひとつです。
(「再生リスト」は、「プレイリスト」(playlist)と呼ばれることもあります。)
この「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むためには、埋め込みコードの「src」の値を「src」の値を下記のような形式にします。
「 https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=リストID&version=3 」
このなかの「リストID」の部分には、表示させたい「再生リスト」(プレイリスト)の「リストID」をいれます。
表示させたい「再生リスト」の「リストID」を取得するためには、YouTubeのウェブサイト内のその「再生リスト」のページを表示させて、そのページのURLのなかの「list=」という文字よりも後ろの部分の「PL」で始まる文字列を見ます。この「PL」で始まる文字列がその「再生リスト」の「リストID」です。
下の「再生リスト」のページの例でいうと、「PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb」という部分が、この「再生リスト」の「リストID」です。
「再生リスト」(プレイリスト)のページのURLの形式
https://www.youtube.com/playlist?list=リストID
「再生リスト」(プレイリスト)のページのURLの実例
https://www.youtube.com/playlist?list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb
「再生リスト」(プレイリスト)を動画プレーヤーとして埋め込むと、コントロールバーのなかに「再生リスト」(「Playlist」)というボタンが表示されます。この「再生リスト」(「Playlist」)ボタンを押すと、画面の下にその「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=リストID&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=リストID&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
(参考)「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
上記の「再生リスト」(プレイリスト)の動画プレーヤーの埋め込みコードに、「showinfo=1」を書き加えると、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)が表示されます。
※注記:下記の「動画を再生する前の画面の下部に、その再生リストに含まれている動画の一覧リスト(サムネイル画像)を表示させる」という機能は、現在はなくなってしまったようです。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=リストID&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=リストID&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/videoseries?hl=ja&listType=playlist&list=PLP89i0IwWpyg17uvevmVgFK6ZqCb8_ikb&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
特定のユーザーの公開動画のリスト(「アップロード動画」)を動画プレーヤーとして埋め込む
特定のYouTubeユーザーがこれまでにYouTubeにアップロードして公開している「アップロード動画」のリストを動画プレーヤーとして埋め込むこともできます。
「listType」の値には、「user_uploads」をいれます。
「list」の値には、対象となるユーザーの「YouTubeユーザー名」(半角英数字)をいれます。
YouTube動画検索の検索結果の動画のリストを動画プレーヤーとして埋め込む
YouTube検索で特定のキーワードを検索したときの検索結果の動画のリストを動画プレーヤーとして埋め込むこともできます。
「listType」の値には、「search」をいれます。
「list」の値には、「検索キーワード」をいれます。
下の動画では、例として、「larry bird 1985」という検索キーワードをいれています。なお、この検索キーワードの意味は、「バスケットボール選手のラリー・バードさん(Larry Bird)の1985年の当時の映像を検索する」というような意味です。
もし、キーワードのあいだにスペースが入る場合は、キーワードどうしのあいだを「+」の記号でつなぎます。下の動画の場合であれば、「larry+bird+1985」というかたちにします。
検索キーワードとして日本語の文字列を設定する場合の事例
以下は、検索キーワードとして日本語の文字列を設定する場合の事例のひとつです。
以下のYouTube動画は、「世阿弥」と「能楽」と「謡曲」という、複数のキーワードで検索した時の検索結果を、埋め込み動画プレーヤーとして埋め込んだものです。
検索キーワードとして使用する日本語の文字列を、「パーセントエンコーディング」(URLエンコード)してから、検索キーワードとして使用する場合
なお、検索キーワードとして日本語のキーワードを設定するときに、上記の実例のように日本語の文字列をそのまま使用した場合に、うまく動作しなかった場合は、つぎのような手順を踏んでいただくと問題が解決するかもしれません。
手順1.検索キーワードとして使用したい日本語の文字列を、「パーセントエンコーディング」(URLエンコード)する(変換する)。
手順2.エンコードして得られた文字列を、検索キーワードとして使用する。
日本語の文字列を「パーセントエンコーディング」(URLエンコード)するときは、たとえば、下記のURLのページなどをつかって、日本語の文字列をエンコード(変換)することができます。
(参考)
Web便利ツール/URLエンコード・デコードフォーム - TAG index
https://www.tagindex.com/tool/url.html
下記は、日本語の文字列を「パーセントエンコーディング」(URLエンコード)したときの実例集です。
実例1:「世阿弥」 → 「%E4%B8%96%E9%98%BF%E5%BC%A5」
実例2:「能楽」 → 「%E8%83%BD%E6%A5%BD」
実例5:「謡曲」 → 「%E8%AC%A1%E6%9B%B2」
以下のYouTube動画は、「世阿弥」と「能楽」と「謡曲」という、複数のキーワードで検索した時の検索結果を、埋め込み動画プレーヤーとして埋め込んだものです(それぞれのキーワードの文字列は「パーセントエンコーディング」(URLエンコード)してから使用してます)。
複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
「playlist」: 「プレイリスト」(「再生リスト」という意味)
「playlist」のパラメータをつかうと、複数の動画を個別に指定してその場でひとつの「再生リスト」をつくり、その「再生リスト」を動画プレーヤーとして埋め込むことができます。
「playlist」のパラメータは、HTML5形式の動画プレーヤーと「Flash(AS3)プレーヤー」形式の動画プレーヤーの両方でつかうことができます。
(Flash形式の埋め込み動画プレーヤーは、非推奨です。)
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: 複数の動画の「動画ID」を「,」(カンマ)で区切った文字列
「playlist」をつかった「再生リスト」の動画プレーヤー(HTML5形式)
(非推奨)「playlist」をつかった「再生リスト」の動画プレーヤー(「Flash(AS3)プレーヤー」形式)、「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
下の動画では、「playlist」のパラメータをつかって「再生リスト」(プレイリスト)をつくって「Flash(AS3)プレーヤー」として表示させています。
また、「showinfo=1」を設定して、動画を再生する前の画面の下部に、その「再生リスト」に含まれている動画の一覧リスト(サムネイル画像)を表示させています。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&playlist=動画ID,動画ID,動画ID,・・・&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&playlist=動画ID,動画ID,動画ID,・・・&version=3&showinfo=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/M7rxN8_mf4Q?hl=ja&playlist=MygBaTl1nGE,WvEhWT3Rd_8,Yws9FpF4jOc,LQnYmaVUBZ8,hUWRfh901c0&version=3&showinfo=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7rxN8_mf4Q?hl=ja&playlist=MygBaTl1nGE,WvEhWT3Rd_8,Yws9FpF4jOc,LQnYmaVUBZ8,hUWRfh901c0&version=3&showinfo=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
「進行状況バー」(プログレスバー、シークバー)の色を変える - 「color」(カラー)
「進行状況バー」というのは、動画全体のなかでいまどこの部分を再生しているのかを示す横棒のことです。
「進行状況バー」は、プログレスバー(progress bar)や、シークバー(seek bar)とも呼ばれます。
「color」(カラー)は、「進行状況バー」(プログレスバー、シークバー)の色を指定します。
「color」の値は、下の2種類です。
- 「color=white」: 白色
- 「color=red」: 赤色
※注記:YouTubeの仕様が変わり、埋め込み動画プレーヤーのコントロールバーの背景色が透明になったことで、コントロールバーの色(背景色)を指定するための「theme」(テーマ)というパラメータは、使用できなくなりました。
「theme」(テーマ)は、コントロールバーの色を指定します。「theme」の値は、下の2種類です。
「theme=dark」: 黒色「theme=light」: 灰色
「color=white」: 「進行状況バー」(プログレスバー、シークバー)白色
「color」の値を「white」にすると、「進行状況バー」(プログレスバー、シークバー)を白色にすることができます。
「color=red」: 「進行状況バー」(プログレスバー、シークバー)赤色
「color」の値を「red」にすると、「進行状況バー」(プログレスバー、シークバー)を赤色にすることができます。(初期状態とおなじ配色です。)
「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
「iv_load_policy」: 「ivロードポリシー」(「アノテーションの表示設定」というような意味)
「iv_load_policy」のパラメータの値を「3」にすると、初期状態で「アノテーション」を非表示に設定することができます。
「iv_load_policy」の値を「1」にすると、初期状態で「アノテーション」を表示する設定にすることができます。
(「iv」というのは「アノテーション」を意味しているようです。)
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 1, 3(初期値は「1」)
下の2つの動画はおなじ動画ですが、上の動画では「アノテーション」を非表示にしています。
「iv_load_policy=1」(「アノテーション」表示)
「iv_load_policy=3」(「アノテーション」非表示)
キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
「disablekb」: 「Disable Keyboard」(「ディスエイブルキーボード」(「キーボードを無効にする」という意味))
「disablekb」のパラメータの値を「1」にすると、キーボードからYouTube動画の埋め込みプレーヤーを操作することができなくなります。
キーボードからの操作方法は、つぎのとおりです。
- スペースキー または 「k」キー: 再生/一時停止
- 左矢印キー: 現在の動画を 5秒 戻す
- 右矢印キー: 現在の動画を 5秒 進める
- 上矢印キー: 音量を上げる
- 下矢印キー: 音量を下げる
- 「f」キー: 全画面表示にする/全画面表示を解除する
- 「j」キー: 現在の動画を 10秒 戻す
- 「l」(エル)キー: 現在の動画を 10秒 進める
- 「m」キー: ミュート(音声を出さない)/ミュートを解除する
- 「0」~「9」キー: 動画内の特定のポイントに移動する。「0」キーを押すと、動画の冒頭に移動する。「1」キーを押すと、動画の冒頭から 10% 進んだ時点に移動する。「2」キーを押すと、動画の冒頭から 20% 進んだ時点に移動する。それ以降の番号のキーを押した場合も、それぞれその番号に対応した割合の時点に移動する。
※注:「進行状況バー」というのは、動画全体のなかでいまどこの部分を再生しているのかを示す横棒のことです。「進行状況バー」は、プログレスバー(progress bar)や、シークバー(seek bar)とも呼ばれます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「0」)
下の2つの動画はおなじ動画ですが、上の動画ではキーボード操作を無効にしています。
「disablekb=1」(キーボード操作無効)(HTML5形式の動画プレーヤーの場合)
「disablekb=1」(キーボード操作無効)(HTML5形式の動画プレーヤーの場合)
「disablekb=0」(キーボード操作有効)(HTML5形式の動画プレーヤーの場合)
「disablekb=0」(キーボード操作有効)(HTML5形式の動画プレーヤーの場合)
(非推奨)「disablekb=1」(キーボード操作無効)(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&version=3&disablekb=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&version=3&disablekb=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&disablekb=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&disablekb=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
(非推奨)「disablekb=0」(キーボード操作有効)(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&version=3&disablekb=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&version=3&disablekb=0" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&disablekb=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/Uu9-Edqgdm0?hl=ja&version=3&disablekb=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
「cc_load_policy」: 「Closed Caption Policy」(「クローズドキャプションポリシー」(「字幕の表示設定」というような意味))
「cc_load_policy」のパラメータの値を「1」にすると、たとえ視聴者が字幕をオフにしていたとしても、初期状態で字幕が表示されます。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 1(初期値はユーザー設定に基づく)
下の2つの動画はおなじ動画ですが、上の動画では初期状態で字幕を表示させるようにしています。
「cc_load_policy=1」(字幕を表示)(HTML5形式の動画プレーヤーの場合)
「cc_load_policy=1」(字幕を表示)(HTML5形式の動画プレーヤーの場合)
「cc_load_policy」のパラメータを設定していない場合(HTML5形式の動画プレーヤーの場合)
「cc_load_policy」のパラメータを設定していない場合(HTML5形式の動画プレーヤーの場合)
(非推奨)「cc_load_policy=1」(字幕を表示)(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&version=3&cc_load_policy=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&version=3&cc_load_policy=1" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/nFv7OhZWRSI?hl=ja&version=3&cc_load_policy=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/nFv7OhZWRSI?hl=ja&version=3&cc_load_policy=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
(非推奨)「cc_load_policy」のパラメータを設定していない場合(「Flash(AS3)プレーヤー」形式)
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
※注記:お使いのウェブブラウザによっては、この下に設置されている埋め込み動画プレーヤーが表示されない場合があります。
<param name="movie" value="https://www.youtube.com/v/動画ID?hl=ja&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/動画ID?hl=ja&version=3" type="application/x-shockwave-flash" width="横幅" height="縦幅" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
<param name="movie" value="https://www.youtube.com/v/nFv7OhZWRSI?hl=ja&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/nFv7OhZWRSI?hl=ja&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
「JavaScriptプレーヤーAPI」を利用する場合につかうパラメータとして、つぎのようなパラメータがあります。
(「JavaScriptプレーヤーAPI」を利用すると、JavaScriptをつかって、標準の埋め込みプレーヤーやクロムレスプレーヤーを自由にカスタマイズしたり制御したりすることができます。)
- 「enablejsapi」: 「Enable JS API」(イネイブル JS API)
- 「playerapiid」: 「Player API ID」(プレーヤーAPI ID)
- 「origin」: (オリジン)
「JavaScriptプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
「enablejsapi」(イネイブル JS API)
「enablejsapi」の値を「1」にすると、「JavaScriptプレーヤーAPI」が有効になります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1(初期値は「0」)
「playerapiid」(プレーヤーAPI ID)
「playerapiid」の値には、動画プレーヤーを表示させる部分のHTMLタグのIDの文字列(半角英数字)をいれます。
この「playerapiid」の値を設定することで、「どの動画プレーヤーを制御するのか」ということを指定して、「JavaScriptプレーヤーAPI」のJavaScriptにつたえることができるようになります。
対象となる動画プレーヤーのタイプ: AS3, AS2
設定できる値: 半角英数字の文字列(HTMLタグのid名)
「origin」(オリジン)
「origin」のパラメータをつかうと、<iframe>タグ形式の埋め込みコードをつかう場合に、セキュリティーを高めることができます。
(「origin」がつかえるのは、<iframe>タグ形式の埋め込みコードの場合だけです。)
「origin」の値には、動画プレーヤーを埋め込むページのドメイン名をいれます。
YouTubeの公式ヘルプページには、「JavaScriptプレーヤーAPI」をつかって、<iframe>タグ形式の埋め込みコードの動画プレーヤーを制御する場合(「enablejsapi」の値を「1」にしている場合)は、常に「origin」を利用して動画プレーヤーを埋め込むページのドメイン名を指定するべきだと書かれています。
対象となる動画プレーヤーのタイプ: AS3, HTML5
設定できる値: (動画プレーヤーを埋め込むページの)ドメイン名
動画プレーヤーのユーザーインターフェース上に表示される言葉の言語を指定する - 「hl」(ホストランゲージ)
「hl」: 「Host Language」(「ホスト・ランゲージ」(「ホスト言語」という意味))
ここで言う「ホスト言語」というのは、動画プレーヤーのユーザーインターフェース上に表示されるツールチップの文字の言語のことです。
「hl」のパラメータを設定することによって、動画プレーヤーのユーザーインターフェース上に表示されるツールチップの文字の言語を指定することができます。
ここで言う「ツールチップ」というのは、動画プレーヤーのユーザーインターフェース上に表示される、下記のような各種のアイコンの上にマウスを移動させたときに表示される文字のことです。
・「全画面」のアイコン
・「設定」のアイコン
・「ミュート(消音)」のアイコン
・「共有」のアイコン
・「●● として後で再生します」のアイコン(「後で再生する」のアイコン)
・YouTubeのロゴのアイコン(「youtube.com で視聴する」のアイコン)
「hl」のパラメータの値として使用できる値は、下記のURLのページに記載されている「ISO 639-1 Code」の項目の欄に記載されている2文字の言語コードです。
ISO 639-2 Language Code List - Codes for the representation of names of languages (Library of Congress)
https://www.loc.gov/standards/iso639-2/php/code_list.php
下記は、「hl」の値の具体例です。
・日本語(Japanese):「hl=ja」
・英語(English):「hl=en」
・中国語(Zhōngwén(中文)):「hl=zh」
・スペイン語(Español):「hl=es」
また、「hl」のパラメータは、初期状態の字幕トラックの言語にも影響します。
なお、ユーザーが個別に設定した言語設定と、利用可能な字幕トラックにもとづいて、YouTube のシステムが、特定のユーザーに対して異なる字幕トラックを表示させることもあります。
また、IETF 言語タグ(BCP 47)などの、ほかの言語入力コードも、「hl」のパラメータの値として使用できます。
(参考)
IETF言語タグ - Wikipedia
https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0
「hl=en」(ツールチップの文字の言語を、英語にする)
英語(English):「hl=en」
動画プレーヤーのユーザーインターフェース上に表示されるツールチップの文字の言語を、英語にする。
「hl=zh」(ツールチップの文字の言語を、中国語にする)
中国語(Zhōngwén(中文)):「hl=zh」
動画プレーヤーのユーザーインターフェース上に表示されるツールチップの文字の言語を、中国語にする。
「hl=es」(ツールチップの文字の言語を、スペイン語にする)
スペイン語(Español):「hl=es」
動画プレーヤーのユーザーインターフェース上に表示されるツールチップの文字の言語を、スペイン語にする。
(参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
<iframe>タグの埋め込みコードのなかの「allowfullscreen」(アラウフルスクリーン)という項目を削除すると、全画面表示ができないようになります。
なお、埋め込みコードのなかに「allowfullscreen」が入っていない場合は、「fs」の値を「0」に設定しなくても、コントロールバーの右端にある全画面表示ボタンは非表示になります。
下の2つの動画はおなじ動画ですが、上の動画では全画面表示ができないようにしています。
「allowfullscreen」無し(全画面表示ができないようにする)
「allowfullscreen」有り(全画面表示ができるようにする)
(参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
<iframe>タグの埋め込みコードのなかの「frameborder」(フレームボーダー)という項目の値を「1」にすると、動画プレーヤーの周囲に灰色の枠線が表示されます。
下の2つの動画はおなじ動画ですが、上の動画では(すこしわかりにくいかもしれませんが)動画プレーヤーの周囲に灰色の枠線を表示させています。
「frameborder="1"」(周囲に枠線をつける)
「frameborder="0"」(周囲に枠線をつけない)
(廃止)コントロールバーと「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
(注記:この記事を書いたあとで、「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させるためのパラメーターである「autohide」(オートハイド)は、非推奨(廃止)になりました。)
「autohide」: 「Auto Hide」(「オートハイド」(「自動的に隠す」という意味))
「autohide」のパラメータを設定することによって、コントロールバーと「進行状況バー」(プログレスバー、シークバー)をスライドアウトさせて隠したり、逆に、常に表示させ続けることができます。
「コントロールバー」というのは、動画の下についている、「再生」ボタンや「一時停止」ボタン、動画再生の進行状況を示す「プログレスバー」(シークバー)、「経過時間表示」、「音量調節」、「全画面表示」ボタンなどがついている、「動画の再生について操作することができる部分」のことです。
「プログレスバー」というのは、動画プレーヤーの下部にある「コントロールバー」についている、「動画全体のなかでいまどこの部分を再生しているのかという進行状況を示す横棒」のことです。「スライド式プログレスバー」や、「シークバー」と呼ばれることもあります。
対象となる動画プレーヤーのタイプ: AS3, AS2, HTML5
設定できる値: 0, 1, 2(初期値は「2」)
(廃止)「autohide=1」(コントロールバーと「進行状況バー」(プログレスバー、シークバー)が隠れる)
(注記:この記事を書いたあとで、「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させるためのパラメーターである「autohide」(オートハイド)は、非推奨(廃止)になりました。)
「autohide」の値を「1」にすると、再生が開始された直後に、コントロールバーと「進行状況バー」(プログレスバー、シークバー)がスライドアウトして隠れるようになります。
また、動画の再生前の画面でも、コントロールバーと「進行状況バー」(プログレスバー、シークバー)が表示されなくなります。
マウスカーソルを動画プレーヤーの上に移動させるか、キーボードのキーを押して動画プレーヤーを操作するとコントロールバーと「進行状況バー」(プログレスバー、シークバー)が表示され、マウスカーソルを動画プレーヤーの外に移動させるとコントロールバーと「進行状況バー」(プログレスバー、シークバー)がスライドアウトして隠れます。
(廃止)「autohide=0」(コントロールバーと「進行状況バー」(プログレスバー、シークバー)を表示させ続ける)
(注記:この記事を書いたあとで、「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させるためのパラメーターである「autohide」(オートハイド)は、非推奨(廃止)になりました。)
「autohide」の値を「0」にすると、動画が再生されているあいだずっとコントロールバーと「進行状況バー」(プログレスバー、シークバー)が表示されつづけるようになります。
(廃止)「autohide=2」(「進行状況バー」(プログレスバー、シークバー)が目立たないようになる)
(注記:この記事を書いたあとで、「進行状況バー」(プログレスバー、シークバー)を隠す/常に表示させるためのパラメーターである「autohide」(オートハイド)は、非推奨(廃止)になりました。)
「autohide」の初期値は、「2」です。埋め込みコードのなかに「autohide」のパラメータをいれていない場合は、自動的に「autohide=2」にした状態とおなじ設定になります。
「autohide」の値を「2」にすると、再生が開始された直後に、「進行状況バー」(プログレスバー、シークバー)がスライドアウトして細くなって目立たないようになります。(コントロールバーはずっと表示され続けます。)
マウスカーソルを動画プレーヤーの上に移動させると「進行状況バー」(プログレスバー、シークバー)が元の太さにもどり、マウスカーソルを動画プレーヤーの外に移動させると「進行状況バー」(プログレスバー、シークバー)がスライドアウトして細くなります。
(廃止)最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
(参考)
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame API | Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja#hl
「vq」: 「Video Quality」(「ビデオクオリティー」(動画の画質))の略
「vq」のパラメータを設定することによって、動画を最初から高画質や低画質で再生させることができます。
「vq」の値として設定できる値は、つぎのとおりです。(上にあるものほど高画質で、下にあるものほど低画質です。)
- 「vq=hd1080」: 画質1080p(HD画質(高精細度))
- 「vq=hd720」: 画質720p(HD画質(高精細度))
- 「vq=large」: 画質480p
- 「vq=medium」: 画質360p
- 「vq=small」: 画質240p
なお、「vq」のパラメータが指定されていない場合は、初期値である「360p」の画質で再生されます。
(「vq=hd1080」や「vq=hd720」のなかの「hd」というのは、「High Difinition」(ハイデフィニション)の略で、「高精細度」という意味です。この「hd」という言葉の使用例としては、たとえば、「画質がHDの動画」という表現があります。この表現の意味は、「高画質な動画」という意味です。「HD」は、「ハイビジョン画質」や、「HDTV」、「高品位テレビ」などとも呼ばれています。)
(「1080p」などの「p」というのは、「プログレッシブ方式」であるということをあらわしています。)
YouTube動画をHD画質にしたい場合は、YouTubeにアップロードする動画ファイルの映像の縦横の長さと、その比率を一定の数字にする必要があります。
画質を「1080p」にしたい場合は、映像の縦横の長さとその比率を下記の設定にする必要があります。
画質「1080p」
横1920ピクセル × 縦1080ピクセル
(横縦の比率 16:9)
画質を「720p」にしたい場合は、映像の縦横の長さとその比率を下記の設定にする必要があります。
画質「720p」
横1280ピクセル × 縦720ピクセル
(横縦の比率 16:9)
(廃止)「vq=hd1080」: 画質1080p(HD画質(高精細度))
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
(廃止)「vq=hd720」: 画質720p(HD画質(高精細度))
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
(廃止)「vq=large」: 画質480p
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
(廃止)「vq=medium」: 画質360p
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
(廃止)「vq=small」: 画質240p
(注記:この記事を書いたあとで、「動画の画質」を指定するためのパラメーターである「vq」(「Video Quality」(「ビデオクオリティー」)の略)は、廃止されたようです。ですので、現在では、「動画の画質」を指定することはできません。)
僕が試した限りでは、「vq」の値を「small」にしても、なぜか初期状態の画質は「240p」にならず、「360p」になってしまいました。
YouTubeの仕様上は、「vq」の値として「small」という値を設定できるようになっているはずなのですが、なぜかうまく動作しませんでした。
下の動画でも、きちんと設定しているにもかかわらず、初期状態の画質は「240p」ではなく、なぜか「360p」になってしまいます。
(参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
下記のパラメータは、非推奨(廃止予定)のパラメータです。
これらのパラメータは、旧式の「ActionScript バージョン2.0」を利用する旧式の「Flash(AS2)プレーヤーAPI」だけでしか利用できません。
- border
- color1, color2
- egm
- hd
- showsearch
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
動画プレーヤーを制御するための3つのAPI
YouTubeの埋め込み動画プレーヤーでは、APIを利用することで、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができます。
ちなみに、「API」というのは、「アプリケーション・プログラミング・インターフェース」(Application Programming Interface)の略です。APIが提供されているウェブサービスでは、そのウェブサービスの機能を自分でカスタマイズして独自の仕組みをつくることができます。
YouTubeの埋め込み動画プレーヤーのAPIには、つぎの3つの種類があります。
- 「IFrameプレーヤーAPI」
- 「JavaScriptプレーヤーAPI」
- (非推奨)「Flash(AS3)プレーヤーAPI」
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
「IFrameプレーヤーAPI」
「IFrameプレーヤーAPI」の仕組みを利用すると、JavaScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、音量の調整、再生中の動画についての情報の取得などの操作をおこなうことができます。
「IFrameプレーヤーAPI」がつかえるのは、標準の<iframe>タグ形式の動画プレーヤーだけです。<object>タグ形式の動画プレーヤーや、クロムレスプレーヤーではつかえません。
「IFrameプレーヤーAPI」は、HTML5の<iframe>タグをつかって動画プレーヤーを表示させるようになっているので、プラットフォームの違いに対して柔軟に対応することができます。そのため、Flash形式の動画プレーヤーを表示できないスマートフォンなどのモバイル機器でも、埋め込み動画プレーヤーのYouTube動画を問題なく見ることができます。
また、JavaScriptの「イベントリスナー」の機能をつかうことができるので、動画に関する「イベント」が発生したときに予め指定した動作をさせることもできます。
ここまでお話してきた各種の「パラメータ」をつかうこともできます。
「IFrameプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube Player API Reference for iframe Embeds - YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference
下の動画は、「IFrameプレーヤーAPI」を利用した動画プレーヤーの実例です。
<div id="iframe_player_api"></div>
<script>
// YouTubeのウェブサイト上にある「IFrameプレーヤーAPI」のコードを
// 非同期的に読み込む。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var iframePlayerApiScriptTag = document.getElementsByTagName('script')[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);
// 「IFrameプレーヤーAPI」のコードが読み込まれた後、
// 「iframe_player_api」というIDがついている<div>タグが
// YouTube動画プレーヤーの<iframe>タグに置き換えられる。
var player;
function onYouTubePlayerAPIReady() {
//ここで指定しているID名(「iframe_player_api」)がついた
//<div>タグ(上記)は、ページが表示される前に
//自動的に<iframe>タグ(動画プレーヤー)に置き換えられます。
player = new YT.Player('iframe_player_api', {
//動画プレーヤーの横幅(width)と縦幅(height)
height: '315',
width: '560',
//表示させるYouTube動画の「動画ID」
videoId: 'Uu9-Edqgdm0',
//動画プレーヤーの設定をおこなう「パラメータ」
playerVars: {
//左の値は「パラメータの名前」。
//右の値は「パラメータの値」。
'modestbranding': 1,
'vq': 'hd1080'
},
//「イベントリスナー」
events: {
//左の値は「イベントリスナー」。
//右の値はそのイベントが発生した時に実行される関数。
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
//イベントが発生した時に実行される関数の定義
function onPlayerReady(){
}
function onPlayerStateChange(){
}
</script>
「JavaScriptプレーヤーAPI」
「JavaScriptプレーヤーAPI」の仕組みを利用すると、JavaScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、指定した動画位置のシーク、音量の調整、ミュートなど、関数を呼び出すことでさまざまな操作をおこなうことができます。
「JavaScriptプレーヤーAPI」は、標準の埋め込み動画プレーヤーとクロムレスプレーヤーの両方でつかうことができます。
「JavaScriptプレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
(非推奨)「Flash(AS3)プレーヤーAPI」
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
「Flash(AS3)プレーヤーAPI」の仕組みを利用すると、ActionScriptをつかって、動画プレーヤーを制御することができます。
再生、一時停止、指定した動画位置のシーク、音量の調整、ミュートなど、関数を呼び出すことでさまざまな操作をおこなうことができます。
「ActionScript」(アクションスクリプト)というのは、Flashを操作するためにつかわれるプログラミング言語です。
(「AS3」というのは、「ActionScript バージョン3.0」の略です。同様に、「AS2」というものもあります。こちらは、旧式の「ActionScript バージョン2.0」の略です。「AS2」形式の埋め込み動画プレーヤーは、YouTubeでは非推奨(廃止予定)になっています。)
「Flash(AS3)プレーヤーAPI」は、標準の埋め込み動画プレーヤーとクロムレスプレーヤーの両方でつかうことができます。
「Flash(AS3)プレーヤーAPI」の詳細については、下のYouTube公式ヘルプページをご覧ください。
YouTube ActionScript 3.0 Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference
YouTube ActionScript 3.0 Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
参考サイト、YouTube公式ヘルプページ
下のページはそれぞれ、YouTube公式の開発者用のヘルプページです。
「YouTube埋め込み動画プレーヤーのパラメータ」関連
YouTubeの埋め込み動画プレーヤーの「パラメータ」についてのリファレンスのページです。
YouTube Embedded Players and Player Parameters - YouTube - Google Developers
https://developers.google.com/youtube/player_parameters
YouTube 埋め込みプレーヤーのパラメータ - YouTube — Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja
上記のページの日本語版です。掲載されている情報が古くなっていたり、上記のページとは内容が異なっていることがあるので注意してください。
「YouTubeプレーヤーAPI」関連
「YouTubeプレーヤーAPI」には、つぎの3種類があります。
- IFrameプレーヤーAPI
- JavaScriptプレーヤーAPI
- (非推奨)Flash(AS3)プレーヤーAPI
下のページは、YouTubeのAPIの概要についてのページです。「YouTubeプレーヤーAPI」の概要だけでなく、「YouTubeデータAPI」の概要も掲載されています。
API Overview Guide - YouTube — Google Developers
https://developers.google.com/youtube/getting_started?hl=en
API の概要 - YouTube — Google Developers
https://developers.google.com/youtube/getting_started?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
「IFrameプレーヤーAPI」のリファレンス
YouTube Player API Reference for iframe Embeds - YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference
(非推奨)「Flash(AS3)プレーヤーAPI」のリファレンス
※注記:YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)(<object>タグの埋め込み動画プレーヤーや、<embed>タグの埋め込み動画プレーヤー)のことです。
Flash形式の埋め込み動画プレーヤー(「Flash(AS3)プレーヤー」)の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
(日本語訳:「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」)
ですので、現在は、HTML5形式の動画プレーヤー(<iframe>タグの埋め込み動画プレーヤー)を使用するようにしていただければとおもいます。
YouTube ActionScript 3.0 Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference
YouTube ActionScript 3.0 Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/flash_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
「JavaScriptプレーヤーAPI」のリファレンス
YouTube JavaScript Player API Reference - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference
YouTube JavaScript Player API リファレンス - YouTube — Google Developers
https://developers.google.com/youtube/js_api_reference?hl=ja
上記のページの日本語版です。上記のページとは内容が異なることがあるので注意してください。
YouTube埋め込み動画プレーヤーの作成ツール/デモ
YouTube Player Demo - YouTube — Google Developers
https://developers.google.com/youtube/youtube_player_demo
その他
YouTube 動画を埋め込むには - YouTube ヘルプ
「以前の埋め込みコードを使用する」
https://support.google.com/youtube/bin/answer.py?hl=ja&answer=171780&expand=UseOldEmbedCode#oldcode
おもしろい組み合わせ方を思いついたら、ぜひ教えてください
ここまでお話してきたパラメータやAPIは、組み合わせ次第でいろいろな使い方ができます。
これらをうまくつかえば、便利な機能を実現したり、おもしろいアイデアをかたちにすることもできるでしょう。
もし、おもしろい組み合わせ方や活用方法を思いついたときは、ぜひ下のコメント欄で教えてください。
あなたのアイデアで、世の中をもっとおもしろくしてしまいましょう!
d(≧∀≦)b
YouTube APIについての関連記事
下の記事は、「YouTubeのAPI」についての、そのほかの関連記事です。
YouTubeのAPIについてもっと知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。
- YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み (HTML、IFrameプレーヤーAPI(JavaScript)、CSS)
- YouTube動画の一時停止ができないようにする仕組み (IFrameプレーヤーAPI(JavaScript))
- YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み (IFrameプレーヤーAPI(JavaScript))
YouTubeのうまい使い方についての関連記事
下の記事は、「YouTubeのうまい使い方」についての関連記事です。
YouTubeのうまい使い方について知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。
“YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例” への9件のフィードバック