youtube API ※ 画像をクリックしたら動画を再生させる方法(レスポンシブ対応)


スポンサーリンク

youtube の 動画コントロールは結構厄介。
それがレスポンシブともなると、泣きを見る。

手順としては、
1、youtube の画像を表示しておく。
2、画像をクリックされたら、youtube の タグに入れ替える
(youtube API の ハンドル作成 / 自動生成ボタンを勝手に押す)
3、youtube の再生が終わったら、ハンドルを削除して、画像を表示する

で、うだうだ言わずにソースと結論と解説。

ソースパクって、id youtube の部分(ソースパクったらテキストエディタで検索すればよい)と
YouTubeのIDとプレーヤーの幅と高さ(サイズ)だけ変えれば済むと思う。
ただし、レスポンシブのテーマ(テンプレート)にしておかないと、
画像を元に戻す時画像サイズの指定が必要になるので注意。
----- HTML部分 -----
<div id="youtube">
    <img src="画像URL" style="cursor : pointer;" class="alignnone size-full wp-image-219" onclick="youtube_click();" />
</div>



----- スクリプト部分 -----
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ytPlayer;
function youtube_click()
{
	var windowWidth = screen.width; //$(window).width();
	var windowSm = 767;

	//----- 説明 -----
	//「横幅640px以下のとき(つまりスマホ時)に行う処理を書く」
	//と
	//「横幅640px以上のときに行う処理を書く」
	//は、プレーヤーのサイズしか違わないので変数だけ設定して処理するでもOK.
	//---------------

	//横幅640px以下のとき(つまりスマホ時)に行う処理を書く
	if (windowWidth <= windowSm) {
		ytPlayer = new YT.Player(
			'youtube', // 埋め込む場所の指定
			{
				width: 295, // プレーヤーの幅
				height: 180, // プレーヤーの高さ
				videoId: 'YouTubeのID', // YouTubeのID
				events: {
					'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行
					'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
				},
				playerVars: {
					controls: 0, //コントロールの表示を止める
					showinfo: 0, //動画情報の表示を止める
					rel: 0       // 再生終了後に関連動画を表示しない
				}
		    }
		);
	}else{
	//横幅640px以上のときに行う処理を書く
		ytPlayer = new YT.Player(
			'youtube', // 埋め込む場所の指定
			{
				width: 600, // プレーヤーの幅
				height: 337, // プレーヤーの高さ
				videoId: 'YouTubeのID', // YouTubeのID
				events: {
					'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行
					'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
				},
				playerVars: {
					controls: 0, //コントロールの表示を止める
					showinfo: 0, //動画情報の表示を止める
					rel: 0       // 再生終了後に関連動画を表示しない
				}
		    }
		);
	}
	//----- 説明 -----
	//プレーヤーの準備ができたとき動画再生
	//---------------
	// プレーヤーの準備ができたとき
	function onPlayerReady(event) {
	    // 動画再生
	    event.target.playVideo();
	}
	//----- 説明 -----
	//再生が終わったらプレーヤーを殺して画像に戻す
	//---------------
	function onPlayerStateChange(event){
	        // 現在のプレーヤーの状態を取得
	        var ytStatus = event.data;
	        // 再生終了したとき
	        if (ytStatus == 0) {
	                // youtube player のハンドル削除 ディスコンストラクタ
	                ytPlayer.destroy(); 
	                // 画像を戻す
	                document.getElementById("youtube").innerHTML = '<img src="画像URL" style="cursor : pointer;" class="alignnone size-full wp-image-219" onclick="youtube_click();" />';
        	}
	}
}
</script>

スポンサーリンク