user19 · August 29, 2015 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<style type="text/css"></style>
 		<script type="text/javascript">
 			var tag = document.createElement("script");
     			tag.src = "https://www.youtube.com/iframe_api";
 			var firstScriptTag = document.getElementsByTagName('script')[0];

 			var videos = {};
 			var c = 0;
 			window.onload = function(){
 				divisions = {};
 				div = window.document.createElement("div");
 				screen_width = window.parent.screen.width;
 				box = window.document.getElementById("box");
 				player = window.document.getElementById("player");
 				style = window.document.getElementsByTagName("style")[0];
 			}

 			function func(obj){
 				e = obj.e.value;
 				var v = obj.v.value;

 				style.innerHTML = "#player{width:"+screen_width+"px;height:"+Math.floor(screen_width*9/16)+"px;} iframe{width:"+100/e+"%;height:"+100/e+"%;vertical-align:bottom;frameborder:0;}";

 				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 				window.onYouTubeIframeAPIReady = function (){
 					for(i=0; i<e*e; i++){
 						divisions[i] = div.cloneNode(false);
 						divisions[i].id = "video"+i;
 						player.appendChild(divisions[i]);
 						videos[i] = new YT.Player("video"+i, {
 							videoId: v,
                                                        playerVars: {controls: 0,showinfo: 0,iv_load_policy: 3},
 							events: {"onReady": onPlayerReady}
 						});
 					}
 				}
 				
 				fullScreen();

 				box.innerHTML = "<input type="+"button"+" value="+"フルスクリーン"+" onclick="+"fullScreen();"+">";
 			}

 			function fullScreen(){
 				if (player.webkitRequestFullScreen)
 					player.webkitRequestFullScreen();
 				else if(player.mozRequestFullScreen)
 					player.mozRequestFullScreen();
 				else if(player.msRequestFullscreen)
 					player.msRequestFullscreen();
 				else if(player.requestFullScreen)
 					player.requestFullScreen();
 				else
 					return false;
 			}

 			function onPlayerReady(event) {
 				c++;
 				if(c >= e*e){
                                    setTimeout(function(){for(key in videos){if(Number(key))videos[key].mute();videos[key].playVideo();}},1000);
                                    setTimeout(function(){for(key in videos)videos[key].seekTo(0,true);},6000);
                                }
 			}
 		</script>
 	</head>
 	<body>
 		<div id="box">
 			<form name="message" onsubmit="func(this);return false;">
 				<span>動画の数：</span>
 				<select name="e">
 					<option value="1">1
 					<option value="2" selected>4
 					<option value="3">9
 					<option value="4">16
 					<option value="5">25
 					<option value="6">36
 					<option value="7">49
 				</select>
 				<span>frames   </span>
 				<span>YouTube上の動画のID：</span>
 				<input type="text" name="v" value="iMzt7Be_htQ">
 				<input type="submit" value="実行">
 			</form>
 		</div>
 		<div id="player"></div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css"></style>
	<script type="text/javascript">
	var tag = document.createElement("script");
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];

	var videos = {};
	var c = 0;
	window.onload = function(){
	divisions = {};
	div = window.document.createElement("div");
	screen_width = window.parent.screen.width;
	box = window.document.getElementById("box");
	player = window.document.getElementById("player");
	style = window.document.getElementsByTagName("style")[0];
	}

	function func(obj){
	e = obj.e.value;
	var v = obj.v.value;

	style.innerHTML = "#player{width:"+screen_width+"px;height:"+Math.floor(screen_width*9/16)+"px;} iframe{width:"+100/e+"%;height:"+100/e+"%;vertical-align:bottom;frameborder:0;}";

	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	window.onYouTubeIframeAPIReady = function (){
	for(i=0; i<e*e; i++){
	divisions[i] = div.cloneNode(false);
	divisions[i].id = "video"+i;
	player.appendChild(divisions[i]);
	videos[i] = new YT.Player("video"+i, {
	videoId: v,
	playerVars: {controls: 0,showinfo: 0,iv_load_policy: 3},
	events: {"onReady": onPlayerReady}
	});
	}
	}

	fullScreen();

	box.innerHTML = "<input type="+"button"+" value="+"フルスクリーン"+" onclick="+"fullScreen();"+">";
	}

	function fullScreen(){
	if (player.webkitRequestFullScreen)
	player.webkitRequestFullScreen();
	else if(player.mozRequestFullScreen)
	player.mozRequestFullScreen();
	else if(player.msRequestFullscreen)
	player.msRequestFullscreen();
	else if(player.requestFullScreen)
	player.requestFullScreen();
	else
	return false;
	}

	function onPlayerReady(event) {
	c++;
	if(c >= e*e){
	setTimeout(function(){for(key in videos){if(Number(key))videos[key].mute();videos[key].playVideo();}},1000);
	setTimeout(function(){for(key in videos)videos[key].seekTo(0,true);},6000);
	}
	}
	</script>
	</head>
	<body>
	<div id="box">
	<form name="message" onsubmit="func(this);return false;">
	<span>動画の数：</span>
	<select name="e">
	<option value="1">1
	<option value="2" selected>4
	<option value="3">9
	<option value="4">16
	<option value="5">25
	<option value="6">36
	<option value="7">49
	</select>
	<span>frames </span>
	<span>YouTube上の動画のID：</span>
	<input type="text" name="v" value="iMzt7Be_htQ">
	<input type="submit" value="実行">
	</form>
	</div>
	<div id="player"></div>
	</body>
	</html>