ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。
また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤーなどの情報についてもお話します。
さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。
「パラメータ」をつかうと、どんなことができるの?
まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。
実例1: 自動的に再生が始まり、巻き戻しや、早送りはできない
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
これによって、自動的に再生が始まり、操作は一時停止しかできないため、巻き戻しや、早送りはできません。
(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)
この動画の埋め込みコード
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例2: コントロールバーを非表示にする
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例3: 複数の動画を連続して再生させ、それを繰り返す
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
実例4: 一部分だけを再生する
下の動画は、「パラメータ」をつかってつぎのような設定にしています。
この動画の埋め込みコード
これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。
各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。
もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。
( YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表 )
- 「パラメータ」をつかうと、どんなことができるの?
- 埋め込みコードの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公式ヘルプページ
- おもしろい組み合わせ方を思いついたら、ぜひ教えてください