サイトにYouTube動画を貼り付けるときに知っておくと便利なオプションいろいろです。API通りに貼ってても時々仕様が変わるみたいなので気付いた点をメモしておきます。
なお、本稿はAPIの変更等によって随時更新されます。
YouTube埋め込み動画設定の基本
YouTubeの再生ページから発行される基本の埋め込み動画フォーマットは以下のような書式となっています。
<iframe width="560" height="315" src=" 動画URL " frameborder="0" allowfullscreen></iframe>
カスタマイズオプションは、動画URLに続けて「?」で繋いで制御します。複数指定したいときは「&」で繋いで下さい。
src="動画URL?オプション"
src="動画URL?オプション1&オプション2"
YouTube動画の再生開始時間を指定する
長い動画で、好きなシーンから再生させたいときは秒数で指定します。
start=000(秒)
なお、以前は【#t=00m00s】という感じで分や秒を指定出来ましたが、API変更により無効になってしまいました。
しかもYouTubeの共有ボタンで発行されるURI書式も旧仕様となっているので注意してください。公式ボタンでURIを発行しても途中再生にはなりません。
ちなみに、古い書式だと指定が無視されて冒頭からの再生になります。「イコール」以降の時間を秒ベースに直せば希望の動作になります。
動画プレーヤーは、指定の時間に最も近いキーフレームを探して再生を始めます。そのため、リクエストした再生時間と若干ずれて始まることがあります。
end 動画の終了時間を指定する
単独で指定されることは少ないと思いますが、動画の希望終了時間もセットできます。
end=000(秒)
開始時間と併せて再生を希望するシーンを最小時間だけ切り出したいときは以下のように指定します。
?start=100&end=200
SNSで再生時間を指定してシェアしたいとき
サイト埋め込みではなく、SNS等でURLのみ時間を指定してシェアするときは分指定で指定時間から再生されます。フォーマットは統一して欲しい…。(^^;
?t=○○m○○s
○○はそれぞれ分や秒を入れて下さい。
YouTube動画の全画面表示オプション
全画面表示を許可するかどうかを指定出来ます。
fs 全画面オプション
fs=0
fs=1(デフォルト)
デフォルト値は1です。パラメータが0のときは全画面ボタンが非表示になります。
playsinline iOSでの全画面オプション
iOS 上の HTML5 プレーヤーで動画をインラインまたは全画面表示するオプションです。パラメータに1を指定すると、UIWebViews(allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの)が埋め込みで再生されます。
playsinline=0(デフォルト全画面)
playsinline=1(インライン再生)
YouTube動画プレーヤーの色を変えるオプション
オプションの数はそれほど多くありませんが、一応カスタマイズできます。
color 動画経過時間の色を変更する
動画の下部に表示される、経過時間のステータスバーの色を指定出来ます。デフォルトでは赤ですが、whiteというオプションがあります。
color=red(デフォルト赤)
color=white(グレー)
ホワイトって書いてあるけど、事実上はグレーですね。なお、 white セット時は modestbranding オプション(後述)が無効になります。
theme 動画音量など下部コントロールバーの色を変更する
音量などをコントロールする下部バーの色を変更できます。暗色と明色を選べます。
theme=dark(デフォルト黒)
theme=light(グレー)
動画プレーヤー機能の表示/非表示オプション
YouTube動画の各機能における表示設定オプションです。
あまり知られてないオプションということもあって、実際にセットしているケースを見たことはほとんどありません。そのため、良くも悪くもYouTubeらしさがなくなります。
物珍しい印象を演出できますが、うまく誘導しないとユーザビリティが下がるかも。
showinfo 上部インフォメーションバーの表示・非表示
動画タイトルなどが表示される上部ナビゲーションバーの表示/非表示をコントロールできます。
showinfo=0(インフォメーションバー非表示)
showinfo=1(デフォルト表示)
パラメータの値を 0 に設定したとき、動画再生前に動画タイトルなどの情報は表示されません。
再生リストが読み込まれる場合、パラメータの値を明示的に 1 に設定すると「再生リストに含まれる動画のサムネイル画像」も読み込み時に表示されます。
controls コントロールバーの表示・非表示
音量などをコントロールする下部バーを非表示にしたり遅延読み込みにしたり出来ます。
controls=0(コントロールバー非表示)
コントロールバーそのものを表示させないように出来ます。停止と再生は、画面タップで行います。動画をタップするたびに再生と停止を繰り返します。
controls=1(デフォルト表示)
controls=2(動画再生後に表示)
通常のデフォルト表示の他に、動画再生後にツールを表示する事も出来ます。
「パラメータ2」にセットした場合の挙動について説明します。画面ロード時は「パラメータ0」と同じ状態ですが、一時停止などするとコントロールバーが現れ「1」の状態になります。
modestbranding YouTubeロゴの表示・非表示
YouTubeロゴの表示もコントロールできます。
modestbranding=0(デフォルト表示)
modestbranding=1(非表示)
非表示…と言ってもグラフィカルなロゴが出ないだけでテキストでは表示されます。そこまでして独自感を出したい人がどれくらいいるか判りませんが、ロゴくらい普通に表示してやったら良いのでは。(^^;
cc_load_policy 字幕表示設定
組み込んだ字幕を、相手の設定によらず強制的に表示させる方法です。ちなみに「デフォルト値0」にすると、プレーヤーの挙動はユーザ環境に依存します。
cc_load_policy=1(字幕表示)
iv_load_policy アノテーション表示設定
動画アノテーションの表示設定です。パラメータは1または3となってます。設定値に注意して下さい。
iv_load_policy=1(デフォルト)
iv_load_policy=3(アノテーション非表示)
動画のタイムラインに関する再生オプション
前章と区別しにくいんですが、こちらはプレーヤーのインターフェイスではなく動画の再生順などをコントロールするオプションです。
autoplay 動画の自動再生設定
動画を自動再生させるかどうかの設定します。自動再生にするとページロード時に再生トリガがセットされていきなり動画が動き出します。
autoplay=0(デフォルト)
autoplay=1(自動再生開始)
一般的なサイトでやると大ヒンシュクを買うことになるので気をつけましょう…。
rel 関連動画の表示・非表示
動画再生後にYouTubeからリコメンドされる関連動画のコントロールです。デフォルトだと類似テーマの動画が自動的におすすめされますが、それを停止させることが出来ます。
rel=0(関連動画の非表示)
rel=1(デフォルト表示)
loop 動画のループ設定
動画のループ設定です。loopオプション値「1」にすると、動画終了時に最初へ戻って再生しなおされます。ただし後述の playlist パラメータと同時セットじゃないと動きません。
loop=1&playlist=動画URL
同じ動画をループさせたいときは同じURLをセットします。編集済みのプレイリストがある場合はリストIDでも構いません。
playlist 複数の動画を連続再生させる
連続して動画させたいときは複数のIDをカンマで繋ぎます。
playlist=動画URL,動画URL,動画URL
まずはソースとなる(srcで指定された)最初の動画が再生され、その後 playlist のセットリストが再生されます。
YouTubeのキーボードオプション
埋め込み動画のパラメータじゃないんですけど、覚えておくと便利な再生時のキーボードオプション色々です。
disablekb キーボード操作オプション
disablekb=0(デフォルト)
disablekb=1(キーボード操作無効)
値0で、キーボード操作が有効のときの動作は以下の通りです。
左右キーに関して、公式ページでは「10%ずつの早回し」と書かれてますけど うちの環境だと「5秒ずつの早回し」です。「Ctl+左右で10秒ずつの移動」になるようです。もし挙動が違う人がいたら教えて下さい。
廃止されたYouTube動画再生API
【本章追記:2015/12/12】廃止されたパラメータ一覧です。本文から随時待避してます。動かなくなった設定があれば参考にして下さい。
frameborder 枠線の表示・非表示
公式サイトからエンベッドコードを発行すると自動で frameborder=0 がついて枠線非表示になるのですが、枠線をつけることも可能です。ボーダーの色は淡グレー一択で選べません。いわゆるHTMLのborderタグinsetプロパティと同じ挙動(左上に影が入る)をします。
frameborder=1(表示)
【追記:2015/12/12】AS2 Player APIにてサポートされていたパラメータです。
【 更新履歴等 】
2014/09/30 初稿発表
2015/12/12 YouTube動画プレーヤー仕様2015/05/22改訂版に従って修正しました。
コメントをどうぞ(´ω`*)