YouTube動画埋め込みプレーヤーのパラメータ｜YouTubeAPI｜音声・動画配信（ストリーミング）

TOP 音声・動画配信（ストリーミング）YouTube動画埋め込みプレーヤーのパラメータ

関連動画表示の有無〔rel〕
全画面再生ボタン表示の有無〔fs〕
HD再生（720p）の有無〔hd〕
自動再生の有無〔autoplay〕
ループ再生の有無〔loop〕
キー操作無効化の有無〔disablekb〕
コントロールバーの色設定〔color1/color2〕
動画プレーヤーに枠線を付けるかの有無〔border〕
動画情報表示の有無〔showinfo〕
動画アノテーション表示の有無〔iv_load_policy〕

全画面再生ボタン表示の有無
fs

2011/1/7

iframe

全画面再生非表示

https://www.youtube.com/embed/動画ID?fs=0

【設置サンプル】YouTube動画の埋め込み：全画面再生非表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/9YEEl52u8XE?fs=0" 
    frameborder="0"
></iframe>

設置イメージ（iframe）

全画面再生表示（デフォルト）

https://www.youtube.com/embed/動画ID?fs=1

【設置サンプル】YouTube動画の埋め込み：全画面再生表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/9YEEl52u8XE?fs=1" 
    frameborder="0"
></iframe>

設置イメージ（iframe）

object/embed

埋め込みの場合は「fs=1」だけでなく、更にallowFullScreenに「true」を指定。

全画面再生非表示（デフォルト）

http://www.youtube.com/v/動画ID?fs=0

【設置サンプル】YouTube動画の埋め込み：全画面再生非表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?fs=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?fs=0" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true"
        width="560" height="345">
    </embed>
</object>

設置イメージ

全画面再生表示

http://www.youtube.com/v/動画ID?fs=1

【設置サンプル】YouTube動画の埋め込み：全画面再生表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?fs=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true"
        width="560" height="345">
    </embed>
</object>

設置イメージ

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：全画面再生表示(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?fs=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

HD再生（720p）の有無
hd

2011/1/7

object/embed

HD再生しない

http://www.youtube.com/v/動画ID?hd=0

設置イメージ（swfobject）

【設置サンプル】YouTube動画の埋め込み：HD再生しない(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?hd=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?hd=0" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

HD再生する（デフォルト）

https://www.youtube.com/embed/動画ID?hd=1

【設置サンプル】YouTube動画の埋め込み：HD再生する(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?hd=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?hd=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

設置イメージ（swfobject）

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：HD再生する(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?hd=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

自動再生の有無
autoplay

2011/1/7

iframe

自動再生しない（デフォルト）

https://www.youtube.com/embed/動画ID?autoplay=0

【設置サンプル】YouTube動画の埋め込み：自動再生(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/9YEEl52u8XE?autoplay=0" 
    frameborder="0"
></iframe>

自動再生する

https://www.youtube.com/embed/動画ID?autoplay=1

【設置サンプル】YouTube動画の埋め込み：自動再生しない(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="http://www.youtube.com/embed/9YEEl52u8XE?autoplay=1" 
    frameborder="0"
></iframe>

object/embed

自動再生しない（デフォルト）

http://www.youtube.com/v/動画ID?autoplay=0

【設置サンプル】YouTube動画の埋め込み：自動再生しない(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?autoplay=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?autoplay=0" 
        type="application/x-shockwave-flash" 
        width="560" height="345">
    </embed>
</object>

自動再生する

http://www.youtube.com/v/動画ID?autoplay=1

【設置サンプル】YouTube動画の埋め込み：自動再生(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?autoplay=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?autoplay=1" 
        type="application/x-shockwave-flash" 
        width="560" height="345">
    </embed>
</object>

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：自動再生(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?autoplay=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

ループ再生の有無
loop

2011/1/7

object/embed

ループ再生しない（デフォルト）

http://www.youtube.com/v/動画ID?loop=0

【設置サンプル】YouTube動画の埋め込み：ループ再生しない(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?loop=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?loop=0" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

ループ再生する

http://www.youtube.com/v/動画ID?loop=1

【設置サンプル】YouTube動画の埋め込み：ループ再生する(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?loop=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?loop=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：ループ再生する(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?loop=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

キー操作無効化の有無
disablekb

2011/1/7

下記のキー操作を無効化するかどうかを指定します。

[スペース]キー：再生/一時停止、[←]キー: 現在の動画を10%戻す、[→]キー: 現在の動画を10%進める、[↑]キー: 音量を上げる、[↓]キー: 音量を下げる

object/embed

キー操作有効（デフォルト）

http://www.youtube.com/v/動画ID?disablekb=0

【設置サンプル】YouTube動画の埋め込み：キー操作有効(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?disablekb=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?disablekb=0" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

キー操作無効

http://www.youtube.com/v/動画ID?disablekb=1

【設置サンプル】YouTube動画の埋め込み：キー操作無効(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?disablekb=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?disablekb=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：キー操作無効化(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?disablekb=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

コントロールバーの色設定
color1/color2

2011/1/7

メインカラー「color1」、サブカラー「color2」を16進数形式のRGB値で指定します。

object/embed

http://www.youtube.com/v/動画ID?color1=0x402061&color2=0x9461ca

【設置サンプル】YouTube動画の埋め込み：コントロールバーの色設定(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

設置イメージ

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：コントロールバーの色設定(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

動画プレーヤーに枠線を付けるかの有無
border

2011/1/7

動画プレーヤーの周囲を枠線を付ける場合に「color1」、サブカラー「color2」と併用して「border=1」を指定します。

object/embed

枠線あり

http://www.youtube.com/v/動画ID?color1=0x402061&color2=0x9461ca&border=1

【設置サンプル】YouTube動画の埋め込み：コントロールバーの色設定(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca&amp;border=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca&amp;border=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true" 
        width="560" height="345">
    </embed>
</object>

設置イメージ

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：コントロールバーの色設定(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?color1=0x402061&amp;color2=0x9461ca&amp;border=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

動画情報表示の有無
showinfo

2011/1/7

iframe

動画情報非表示

https://www.youtube.com/embed/動画ID?showinfo=0

【設置サンプル】YouTube動画の埋め込み：動画情報非表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/9YEEl52u8XE?showinfo=0" 
    frameborder="0"
></iframe>

設置イメージ（iframe）

動画情報表示（デフォルト）

https://www.youtube.com/embed/動画ID?showinfo=1

【設置サンプル】YouTube動画の埋め込み：動画情報表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/9YEEl52u8XE?showinfo=1" 
    frameborder="0"
></iframe>

設置イメージ（iframe）

object/embed

動画情報非表示

http://www.youtube.com/v/動画ID?showinfo=0

【設置サンプル】YouTube動画の埋め込み：動画情報非表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?showinfo=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?showinfo=0" 
        type="application/x-shockwave-flash" 
        width="560" height="345">
    </embed>
</object>

設置イメージ（swfobject）

動画情報表示（デフォルト）

http://www.youtube.com/v/動画ID?showinfo=1

【設置サンプル】YouTube動画の埋め込み：動画情報表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/9YEEl52u8XE?showinfo=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/9YEEl52u8XE?showinfo=1" 
        type="application/x-shockwave-flash" 
        width="560" height="345">
    </embed>
</object>

設置イメージ（swfobject）

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：動画情報非表示(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/9YEEl52u8XE?showinfo=1", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

動画アノテーション表示の有無
iv_load_policy

2011/1/7

iframe

動画アノテーション非表示

https://www.youtube.com/embed/動画ID?iv_load_policy=3

【設置サンプル】YouTube動画の埋め込み：動画アノテーション非表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/GILIk8W00s4?iv_load_policy=0" 
    frameborder="0"
></iframe>

設置イメージ

動画アノテーション表示（デフォルト）

https://www.youtube.com/embed/動画ID?iv_load_policy=1

【設置サンプル】YouTube動画の埋め込み：動画アノテーション表示(iframe)サンプルを見る

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
    width="560" height="345" 
    src="https://www.youtube.com/embed/GILIk8W00s4?iv_load_policy=1" 
    frameborder="0"
></iframe>

設置イメージ（iframe）

object/embed

動画アノテーション非表示

http://www.youtube.com/v/動画ID?iv_load_policy=3

【設置サンプル】YouTube動画の埋め込み：動画アノテーション非表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/GILIk8W00s4?iv_load_policy=0"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/GILIk8W00s4?iv_load_policy=0" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true"
        width="560" height="345">
    </embed>
</object>

設置イメージ（swfobject）

動画アノテーション表示（デフォルト）

http://www.youtube.com/v/動画ID?iv_load_policy=1

【設置サンプル】YouTube動画の埋め込み：動画アノテーション表示(object/embed)サンプルを見る

<object width="560" height="345">
    <param name="movie" value="http://www.youtube.com/v/GILIk8W00s4?iv_load_policy=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/GILIk8W00s4?iv_load_policy=1" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always"
        allowfullscreen="true"
        width="560" height="345">
    </embed>
</object>

設置イメージ（swfobject）

※swfobject使用

【設置サンプル】YouTube動画の埋め込み：動画アノテーション非表示(swfobject)サンプルを見る

<div id="youtube-video"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    var params = {};
    var attributes = {};
    swfobject.embedSWF("http://www.youtube.com/v/GILIk8W00s4?iv_load_policy=3", "youtube-video", "560", "345", "9.0.0","", flashvars, params, attributes);
</script>

YouTubeAPI YouTube Data API v3を試してみました

YouTubeAPI YouTube動画へのリンクURLのパラメータ

YouTubeAPIYouTube動画埋め込みプレーヤーのパラメータ

関連動画表示の有無rel

iframe

関連動画非表示

関連動画表示（デフォルト）

object/embed

関連動画非表示

関連動画表示（デフォルト）

※swfobject使用

全画面再生ボタン表示の有無fs

iframe

全画面再生非表示

全画面再生表示（デフォルト）

object/embed

全画面再生非表示（デフォルト）

全画面再生表示

※swfobject使用

HD再生（720p）の有無hd

object/embed

HD再生しない

HD再生する（デフォルト）

※swfobject使用

自動再生の有無autoplay

iframe

自動再生しない（デフォルト）

自動再生する

object/embed

自動再生しない（デフォルト）

自動再生する

※swfobject使用

ループ再生の有無loop

object/embed

ループ再生しない（デフォルト）

ループ再生する

※swfobject使用

キー操作無効化の有無disablekb

object/embed

キー操作有効（デフォルト）

キー操作無効

※swfobject使用

コントロールバーの色設定color1/color2

object/embed

※swfobject使用

動画プレーヤーに枠線を付けるかの有無border

object/embed

枠線あり

※swfobject使用

動画情報表示の有無showinfo

iframe

動画情報非表示

動画情報表示（デフォルト）

object/embed

動画情報非表示

動画情報表示（デフォルト）

※swfobject使用

動画アノテーション表示の有無iv_load_policy

iframe

動画アノテーション非表示

動画アノテーション表示（デフォルト）

object/embed

動画アノテーション非表示

動画アノテーション表示（デフォルト）

※swfobject使用

関連コンテンツ

関連動画表示の有無
rel

全画面再生ボタン表示の有無
fs

HD再生（720p）の有無
hd

自動再生の有無
autoplay

ループ再生の有無
loop

キー操作無効化の有無
disablekb

コントロールバーの色設定
color1/color2

動画プレーヤーに枠線を付けるかの有無
border

動画情報表示の有無
showinfo

動画アノテーション表示の有無
iv_load_policy