YouTube動画の一時停止ができないようにする仕組み （IFrameプレーヤーAPI（JavaScript））

ここでは、「YouTube動画の一時停止ができないようにする」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめると、画面をクリックして一時停止にしようとしても動画を止めることはできません。（コントロールバーは非表示にしているので、一時停止ボタンを押すことはできません。）

これによって、「動画を見はじめたら最後まで見るしかなくなる」という仕組みをつくることができます。ページを再読み込みすれば動画の再生は止まりますが、そうすると、つぎに動画を見るときは、またいちばん最初から見なおさなければならなくなります。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード（HTML、JavaScript、CSS）を見ることができます。

See the Pen
YouTubeUnstoppablePlayer by 倉田幸暢 (@yukinobukurata)
on CodePen.

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
「HTML」タブ： この仕組みのソースコード（HTML、JavaScript、CSS）のパネルを表示（または非表示）させる。
「Result」タブ： この仕組みのソースコード（HTML、JavaScript、CSS）を実行したときのウェブページの状態を再現したパネルを表示（または非表示）させる。

ソースコードのダウンロードは、こちらをクリック。（GitHubのリポジトリ）

動画マーケティングに応用する方法

セールスレターや、オプトインページなどで、途中で動画の再生を止めずに、動画の内容をいっきにすべて見てほしいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

カスタマイズして自分用に使う方法（ソースコードの解説）

この仕組みでは、動画が一時停止されると、その直後に「動画を再生させる」という命令を出すようにしています。

これによって、画面をクリックして一時停止しても、その直後にすぐに再生がはじまるので、実質的には一時停止できないのとおなじ状態になっています。

下のように、「動画が一時停止された場合」に出す命令を書いておく「case YT.PlayerState.PAUSED:」という部分のなかに、「動画を再生させる」という命令「player.playVideo();」が書いてあります。

これによって、動画が一時停止されたときに、すぐに「動画を再生させる」という命令が出ます。

switch(event.data){
	 case YT.PlayerState.ENDED:
			break;
	 case YT.PlayerState.PLAYING:
			break;
	 case YT.PlayerState.PAUSED:
			//動画が一時停止されたときに即座に「playVideo()」を実行して
			//一時停止ができないようにする。
			player.playVideo();

			break;
	 case YT.PlayerState.BUFFERING:
			break;
	 case YT.PlayerState.CUED:
			break;
}

基本的な設定項目

//★ユーザー用の設定項目

//★動画プレーヤーの横幅と縦幅を設定する（ピクセル数）。

        //横幅
        var videoWidth = 530;

        //縦幅
        var videoHeight = 298;

//★表示させるYouTube動画の「動画ID」を設定する。
        var youtubeVideoID = "Uu9-Edqgdm0";

動画プレーヤーの横幅と縦幅については、つぎのとおりです。
「var videoWidth = 530;」の「530」のところに、横幅をいれてください。
「var videoHeight = 298;」の「298」のところに、縦幅をいれてください。

表示させるYouTube動画については、「var youtubeVideoID = "Uu9-Edqgdm0";」の「Uu9-Edqgdm0」のところに、表示させたいYouTube動画の「動画ID」をいれてください。

YouTube動画の「動画ID」というのは、YouTube動画の個別視聴ベージのURLのなかの「v=***********」という部分の「***********」の英数字のことです。
下の例でいうと、「Uu9-Edqgdm0」という部分が、「動画ID」です。
YouTube動画の個別視聴ベージのURLの例
http://www.youtube.com/watch?v=Uu9-Edqgdm0&feature=player_embedded

YouTube動画プレーヤーの「パラメータ」

「パラメータ」というのは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための機能です。

たとえば、「パラメータ」を付けることで、下記のようなこともできます。

• 自動的に再生をはじめる。
• コントロールバーを非表示にする。
• プログレスバー（シークバー）を非表示にする。
• タイトルバーを非表示にする。
• 全画面表示ボタンを非表示にする。
• 動画全体のなかの一部分だけを再生する。
  （再生を開始する時点と、再生を終了する時点を指定する。）
• 複数の動画を連続して再生させる。
• すべての動画の再生が終わったら、また最初の動画にもどってそれを繰り返す。

それぞれの機能を実現するための「パラメータ」の使い方や実例などの
くわしい説明については、下記の記事を参照してください。

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

下記の例でいうと、「'modestbranding': 1」や、「'rel': 0」の部分が、それぞれ個々の「パラメータ」です。

個々の「パラメータ」の後ろには必ず「,」（半角のカンマ）をつけてください。
これを付けないと正常に機能しなくなってしまいます。（最後の「パラメータ」の後ろには「,」は不要です。）

//設定をおこなう「パラメータ」
playerVars: {
		//左の値は「パラメータの名前」。
		//右の値は「パラメータの値」。
		'modestbranding': 1,
		'controls': 0,
		'showinfo': 0,
		'rel': 0

},

上記の例のなかの各パラメータの詳細については、下のそれぞれのリンクをクリックして確認してください。

• コントロールバーのYouTubeロゴを非表示にする - 「modestbranding」（モデストブランディング）
• コントロールバーを非表示にする/表示する - 「controls」（コントロールズ）
• タイトルバーを非表示にする - 「showinfo」（ショウインフォ）
• 再生後に表示される「関連動画」を非表示にする - 「rel」（リレイテッドビデオ）

「IFrameプレーヤーAPI」について

上の実例では、「IFrameプレーヤーAPI」の仕組みを利用して、JavaScriptをつかって、YouTubeの動画プレーヤーを制御しています。

「IFrameプレーヤーAPI」は、HTML5の<iframe>タグをつかって動画プレーヤーを表示させるようになっているので、プラットフォームの違いに対して柔軟に対応することができます。そのため、Flash形式の動画プレーヤーを表示できないスマートフォンなどのモバイル機器でも、埋め込み動画プレーヤーのYouTube動画を問題なく見ることができます。

また、JavaScriptの「イベントリスナー」の機能をつかうことができるので、YouTube動画に関する「イベント」が発生したときに、あらかじめ指定した動作をさせることもできます。

今回の仕組みの場合は、「イベントリスナー」の機能をつかって、動画の再生状態が「再生されている状態」から「一時停止の状態」に変わるという「イベント」が発生したときに、あらかじめ設定している命令（「動画を再生させる」という命令）を出すようにしています。

さきほどお話した「パラメータ」をつかうこともできます。

商用利用でも、有料販売でも、改造でも、なんにでも、自由に無料でつかってください（ライセンスについて）

このページでお話している仕組み（ソフトウェア）は、MITライセンスのもとでオープンソースソフトウェアとして配布しています。

条件を守っていただけるのであれば、誰でも自由に無料で、このソフトウェアをつかっていただくことができます。

このソフトウェアをコピーしてつかったり、配布したり、変更を加えたり、変更を加えたものを配布したり、商用利用したり、有料で販売したりと、なんにでも自由につかってください。

このソフトウェアを利用するには、「著作権表示」と「ライセンスの全文」を掲載することと、無保証であることを受け入れることという条件を守っていただく必要があります。

このソフトウェアの場合、「著作権表示」と「ライセンスの全文」の掲載については、ソースコードのなかや、同梱の別ファイルなどに下記の記述を掲載していただくだけでかまいません。

「Copyright (c) 2013 Yukinobu Kurata」という部分は、「著作権表示」の部分です。
「Released under the MIT license」という部分は、「MITライセンスのもとで配布されている」ということを示しています。
最後のURLは、「ライセンスの全文」が掲載されているページのURLです。

（参考）
MITライセンスの詳しい説明は、下のページでお話しています。

MITライセンスについて
http://wisdommingle.com/mit-license/

YouTube APIについての関連記事

下の記事は、「YouTubeのAPI」についての、そのほかの関連記事です。
YouTubeのAPIについてもっと知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。

• YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例
• YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み （HTML、IFrameプレーヤーAPI（JavaScript）、CSS）
• YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み （IFrameプレーヤーAPI（JavaScript））

YouTubeのうまい使い方についての関連記事

下の記事は、「YouTubeのうまい使い方」についての関連記事です。
YouTubeのうまい使い方について知りたい場合は、下のリンクをクリックして、これらの記事もご覧ください。

• YouTubeを活用した「インタラクティブ動画プロモーション」の実例をご紹介します