Youtube Javascript Player APIでフルスクリーン化を可能にする

公開
スポンサーリンク
表題のとおり。Youtube Javascript Player APIで呼び出した動画にフルスクリーンボタンを付ける方法の解説。 以下はYouTube JavaScript Player API リファレンスに載っているコード。
<script type="text/javascript">
 var params = {
     allowScriptAccess: "always"
 };
 var atts = { id: "myytplayer" };
 swfobject.embedSWF(
     "http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",
     "ytapiplayer",
     "425",
     "356",
     "8",
     null,
     null,
     params,
     atts
 );
</script>
このコードで呼び出した動画にはフルスクリーンボタンが付いていない。 Youtubeの動画を埋め込んだ際に、プレーヤーにフルスクリーン化ボタンをつけるには、呼び出しURLに&fs=1を付ける。なので、同様に上のコードのURLに&fs=1を付けてみたところ、押しても効かないフルスクリーンボタンが表示された! びっくりして調べたところ、URLとは別に、もう一カ所設定が必要らしい。で、1行目のparamsにallowfullscreen:"true"を追加。
<script type="text/javascript">
 var params = {
     allowScriptAccess: "always",
     allowfullscreen: "true"
 };
 var atts = { id: "myytplayer" };
 swfobject.embedSWF(
     "http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&fs=1",
     "ytapiplayer",
     "425",
     "356",
     "8",
     null,
     null,
     params,
     atts
 );
</script>
これでフルスクリーンにできるようになる。
スポンサーリンク
スポンサーリンク