##やりたいこと

ページを表示したときにyoutubeをモーダルで開く
モーダルはcolorboxを使用
youtubeの再生が終わったら自動で閉じる
２度目以降に再生したら自動で閉じないようにする

##実装
jQueryとColorboxを読み込みます。

モーダルの表示にはColorboxを使用します。
下記よりダウンロードしたファイル群を読み込みます。
https://github.com/jackmoore/colorbox

Colorboxの使い方は割愛します。

index.html、modal.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>

<link rel="stylesheet" type="text/css" href="css/colorbox.css" />

親側のhtmlには下記を記述します。

index.html

<script>
$(function(){
	$(".iframe").colorbox({iframe:true, open:true,innerWidth:"980", innerHeight:"620", scrolling:false});
});
</script>

<a href="modal.html" class="iframe">Movie Open</a>

モーダル側のhtmlには下記を記述します。

modal.html

<script>

	// IFrame Player API の読み込み
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// YouTubeの埋め込み
	function onYouTubeIframeAPIReady() {
	    ytPlayer = new YT.Player(
	        'player', // 埋め込む場所の指定
	        {
	            width: 976, // プレーヤーの幅
	            height: 549, // プレーヤーの高さ
	            videoId: 'bHQqvYy5KYo', // YouTubeのID
	            playerVars: {
	                rel: 0, // 再生終了後に関連動画を表示するかどうか設定
	                autoplay: 1 // 自動再生するかどうか設定
	            },
	            // イベントの設定
	            events: {
	                'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
	            }
	        }
	    );
	}

	// プレーヤーの状態が変更されたとき
	function onPlayerStateChange(event) {
		// 現在のプレーヤーの状態を取得
		var ytStatus = event.data;
		// 再生終了したとき
		if (ytStatus == YT.PlayerState.ENDED) {
			parent.$.colorbox.close();
		}
	}
</script>

<div id="player"></div>

##２度目以降は自動で閉じないようにする
cookieを使って処理します。
プラグイン「jquery.cookie.js」の読み込みを追加。

プラグインは下記よりダウンロードします。
https://github.com/carhartl/jquery-cookie

jQueryの読み込みよりも後に追加する。

index.html、modal.html

<script src="js/jquery.cookie.js"></script>

onPlayerStateChangeの内容を書き換え。

modal.html

	var loadMovieKey = $.cookie("loadMovieKey");

	// プレーヤーの状態が変更されたとき
	function onPlayerStateChange(event) {
		// 現在のプレーヤーの状態を取得
		var ytStatus = event.data;
		// 再生終了したとき
		if (ytStatus == YT.PlayerState.ENDED) {
			if(loadMovieKey != "played"){
				$.cookie("loadMovieKey", "played", { path: "/" });
				parent.$.colorbox.close();
			}
		}
	}

##参考
http://www.tam-tam.co.jp/tipsnote/javascript/post6217.html