「最初から」タグの記事一覧

YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例

ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための
「パラメータ」という機能の使い方についてお話します。

また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてもお話します。

さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。

「パラメータ」をつかうと、どんなことができるの?

まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。

実例1: 自動的に再生をはじめ、操作は一時停止しかできない

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

(下の動画は、音声無しの動画にしています。これは、この動画は自動的に再生されるように設定しているため、このページを読み込んだときに自動的に音が出ると不都合なことがあるかもしれないということを考慮してのことです。)

この動画の埋め込みコード

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

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例2: コントロールバーを自動的に隠す

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/tQroTplYWqg?rel=0&modestbranding=0&showinfo=0&fs=0&controls=1&autohide=1" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例3: 複数の動画を連続して再生させ、それを繰り返す

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZMdkZeCzj44?playlist=tQroTplYWqg,mSRDQ8Sja3I&loop=1" frameborder="0" allowfullscreen></iframe>

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

実例4: 一部分だけを再生する

下の動画は、「パラメータ」をつかってつぎのような設定にしています。

この動画の埋め込みコード

<iframe width="560" height="315" src="https://www.youtube.com/embed/tQroTplYWqg?start=14&end=28&controls=1&autohide=0" frameborder="0" allowfullscreen></iframe>

これ以降では、まず、YouTubeの埋め込み動画プレーヤーをつかううえでの基本となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤー、クロムレスプレーヤーなどの情報についてお話します。

各種の「パラメータ」についての説明は、それらの基本情報のあとに掲載しています。

もし、「すぐにパラメータの情報が知りたい」という場合や、「基本はすでに知っているという場合」には、それらの基本情報の話を飛ばして、「パラメータ」について話しているところから見ていってください。

▲ もくじへもどる

YouTubeマスターになっちゃうぜ学園: カリキュラム一覧表

目次
  1. 「パラメータ」をつかうと、どんなことができるの?
    1. 実例1: 自動的に再生をはじめ、操作は一時停止しかできない
    2. 実例2: コントロールバーを自動的に隠す
    3. 実例3: 複数の動画を連続して再生させ、それを繰り返す
    4. 実例4: 一部分だけを再生する
  2. 埋め込み動画プレーヤーの2つの種類 - 埋め込みプレーヤー(標準)とクロムレスプレーヤー
    1. 埋め込みプレーヤー(標準)
    2. クロムレスプレーヤー(chromeless player)
  3. 埋め込みコードのHTMLタグの2つの種類 - <iframe>タグと<object>タグ
    1. HTML5形式の埋め込み動画プレーヤー
    2. Flash形式の埋め込み動画プレーヤー - 「Flash(AS3)プレーヤー」
    3. <iframe>タグ(HTML5形式 & Flash形式)
      1. <iframe>タグ(HTML5形式の動画プレーヤーの場合)
      2. <iframe>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」)の場合)
    4. <object>タグ(Flash形式の動画プレーヤー(「Flash(AS3)プレーヤー」))
  4. 「パラメータ」
    1. 再生後に表示される「関連動画」を非表示にする - 「rel」(リレイテッドビデオ)
      1. 「rel=0」(「関連動画」を非表示にする)
      2. 「rel=1」(「関連動画」を表示する)
    2. コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」(モデストブランディング)
      1. 「modestbranding=1」(コントロールバーのYouTubeロゴを非表示にする)
      2. 「modestbranding=0」(コントロールバーのYouTubeロゴを表示する)
    3. 自動的に再生を始める - 「autoplay」(オートプレイ)
    4. 繰り返し再生させる - 「loop」(ループ)
      1. 通常の動画プレーヤーで「loop」をつかう場合
      2. 「再生リスト」の動画プレーヤーで「loop」をつかう場合
        1. Flash形式(<object>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
        2. HTML5形式(<iframe>タグ)の「再生リスト」の動画プレーヤーで「loop」をつかう場合
    5. コントロールバーを非表示にする/表示する - 「controls」(コントロールズ)
      1. 「controls=0」(コントロールバーを非表示にする)
      2. 「controls=1」(コントロールバーを表示する)(「Flash(AS3)プレーヤー」形式)
      3. 「controls=2」(コントロールバーを表示する & パフォーマンス向上)(「Flash(AS3)プレーヤー」形式)
    6. コントロールバーとプログレスバー(シークバー)を隠す/常に表示させる - 「autohide」(オートハイド)
      1. 「autohide=1」(コントロールバーとプログレスバー(シークバー)が隠れる)
        1. コントロールバーとプログレスバー(シークバー)を完全に非表示にする
      2. 「autohide=0」(コントロールバーとプログレスバー(シークバー)を表示させ続ける)
      3. 「autohide=2」(プログレスバー(シークバー)が目立たないようになる)
    7. 全画面表示ボタンを非表示にする - 「fs」(フルスクリーン)
      1. 「fs=0」(全画面表示ボタンを非表示にする)
      2. 「fs=1」(全画面表示ボタンを表示する)
      3. 「fs」をHTML5形式の動画プレーヤーでつかう
        1. 「fs=0」(全画面表示ボタンを非表示にする)(HTML5形式の動画プレーヤーの場合)
        2. 「fs=0」(全画面表示ボタンを非表示にする & 全画面表示ができないようにする)(HTML5形式の動画プレーヤーの場合)
    8. タイトルバーを非表示にする - 「showinfo」(ショウインフォ)
      1. 「showinfo=0」(タイトルバーを非表示にする)
      2. 「showinfo=1」(「再生リスト」のサムネイルを表示させる)(「再生リスト」の動画プレーヤーの場合)
      3. (参考)「showinfo」を明示的に設定しない場合(「再生リスト」のサムネイルを表示しない)(「再生リスト」の動画プレーヤーの場合)
    9. 最初から高画質/低画質で再生する - 「vq」(ビデオクオリティー)
      1. 「vq=hd1080」: 画質1080p(HD画質(高精細度))
      2. 「vq=hd720」: 画質720p(HD画質(高精細度))
      3. 「vq=large」: 画質480p
      4. 「vq=medium」: 画質360p
      5. 「vq=small」: 画質240p
    10. 再生を開始する位置を指定する – 「start」(スタート)
    11. 再生を終了する位置を指定する – 「end」(エンド)
    12. 「再生リスト」、公開動画リスト、動画検索結果リストを動画プレーヤーとして埋め込む - 「listType」(リストタイプ)&「list」(リスト)
      1. HTML5形式の動画プレーヤー(<iframe>タグ)をつかった「再生リスト」の動画プレーヤー
      2. Flash形式の動画プレーヤー(<object>タグ)をつかった「再生リスト」の動画プレーヤー
        1. (参考)「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
      3. 特定のユーザーの公開動画のリスト(「アップロード動画」)を動画プレーヤーとして埋め込む
        1. (参考)「showinfo=1」に設定した場合(「アップロード動画」のリストのサムネイルを表示させる)
      4. YouTube動画検索の検索結果の動画のリストを動画プレーヤーとして埋め込む
        1. (参考)「showinfo=1」に設定した場合(動画検索結果のリストのサムネイルを表示させる)
    13. 複数の動画から「再生リスト」をつくって動画プレーヤーとして埋め込む - 「playlist」(プレイリスト)
      1. 「playlist」をつかった「再生リスト」の動画プレーヤー(HTML5形式)
      2. 「playlist」をつかった「再生リスト」の動画プレーヤー(「Flash(AS3)プレーヤー」形式)、「showinfo=1」に設定した場合(「再生リスト」のサムネイルを表示させる)
    14. コントロールバーとプログレスバー(シークバー)の色を変える - 「theme」(テーマ)&「color」(カラー)
      1. 「theme=dark」「color=red」: コントロールバー黒色、プログレスバー(シークバー)赤色
      2. 「theme=dark」「color=white」: コントロールバー黒色、プログレスバー(シークバー)白色
      3. 「theme=light」「color=red」: コントロールバー灰色、プログレスバー(シークバー)赤色
      4. 「theme=light」「color=white」: コントロールバー灰色、プログレスバー(シークバー)白色
    15. 「アノテーション」を非表示にする/表示する – 「iv_load_policy」(ivロードポリシー)
      1. 「iv_load_policy=1」(「アノテーション」表示)
      2. 「iv_load_policy=3」(「アノテーション」非表示)
    16. キーボードからの操作を無効にする – 「disablekb」(ディスエイブルキーボード)
      1. 「disablekb=1」(キーボード操作無効)
      2. 「disablekb=0」(キーボード操作有効)
    17. 字幕を表示させる – 「cc_load_policy」(クローズドキャプションポリシー)
      1. 「cc_load_policy=1」(字幕を表示)
      2. 「cc_load_policy」のパラメータを設定していない場合
    18. 「JavaScriptプレーヤーAPI」関連のパラメータ – 「enablejsapi」(イネイブル JS API)&「playerapiid」(プレーヤーAPI ID)&「origin」(オリジン)
      1. 「enablejsapi」(イネイブル JS API)
      2. 「playerapiid」(プレーヤーAPI ID)
      3. 「origin」(オリジン)
    19. (参考)全画面表示ができないようにする - 「allowfullscreen」(アラウフルスクリーン)
      1. 「allowfullscreen」無し(全画面表示ができないようにする)
      2. 「allowfullscreen」有り(全画面表示ができるようにする)
    20. (参考)周囲に枠線をつける - 「frameborder」(フレームボーダー)
      1. 「frameborder="1"」(周囲に枠線をつける)
      2. 「frameborder="0"」(周囲に枠線をつけない)
  5. (参考)非推奨(廃止予定)のパラメータ(「Flash(AS2)プレーヤーAPI」限定)
  6. 動画プレーヤーを制御するための3つのAPI
    1. 「IFrameプレーヤーAPI」
    2. 「Flash(AS3)プレーヤーAPI」
    3. 「JavaScriptプレーヤーAPI」
  7. 参考サイト、YouTube公式ヘルプページ
    1. 「YouTube埋め込み動画プレーヤーのパラメータ」関連
    2. 「YouTubeプレーヤーAPI」関連
      1. 「IFrameプレーヤーAPI」のリファレンス
      2. 「Flash(AS3)プレーヤーAPI」のリファレンス
      3. 「JavaScriptプレーヤーAPI」のリファレンス
    3. YouTube埋め込み動画プレーヤーの作成ツール/デモ
    4. その他
  8. おもしろい組み合わせ方を思いついたら、ぜひ教えてください
    1. YouTube APIについての関連記事
    2. YouTubeのうまい使い方についての関連記事

続きを読む

メルマガ登録
メールマガジンへのご登録は、こちらからどうぞ
PR

このページの先頭へ