June 2, 2017 13:53
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <style>
    #floater-box, #button-box, #form, #posts{
  border: 1px black solid;
  padding: 10px;
  width: 100hh;
 }

 #button-box > ul {
  list-style: none;
   display: inline;
  padding: 2px;
  font-size: .7em;
 }

 #form > form > input {
  border: 0px;
  border-bottom: 1px black solid;
  margin-top: 5px;
 }
  </style>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
   
    <div id="player"></div>
    
    <div id = 'infobar'>
      <div id='float-box'>
        <div id = 'button-box'>
          <button id="comment-button">comment</button>
        </div>
        <div id= 'form' style="display:none;">
          <input id = 'comment' type=text></input>
        <button id="submit" >submit</button>
       </div>
    </div>
      
    </div>
 
  

 </body>
 <script>
 // 2. This code loads the IFrame Player API code asynchronously.
 var tag = document.createElement('script');

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 // 3. This function creates an <iframe> (and YouTube player)
 //    after the API code downloads.
 var player;
 var videoId = 'M7lc1UVf-VE';
 function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady
    }
  });
 }

 // 4. The API will call this function when the video player is ready.
 function onPlayerReady(event) {
  event.target.playVideo();
 }

 // function to pause playback and open comment form
 function commentFunc(){
  player.pauseVideo();
  document.getElementById("form").style.display = 'block';
 }

 // function to submit comment along with position
 function submitComment(pos){
  var comment = document.getElementById("comment");
  if(comment.value){
  console.log(comment.value + ' ' + pos);}
  var obj = {};
  obj.videoId = videoId;
  obj.position = pos;
  obj.comment = comment.value;
  comment.value = null;
  document.getElementById("form").style.display = 'none';
  player.playVideo();
  data.push(obj);
  console.log(data);
 }

 // Event listeners to link buttons with respective functions
 document.getElementById("comment-button").addEventListener("click", 
                              function(){console.log("clicked"); 
                                         commentFunc();})
 document.getElementById("submit").addEventListener("click", 
                              function(){
  submitComment(player.getCurrentTime());
  console.log("clicked");
                                        });
 // variable to store all data
 var data = [];
 var i = 0;

 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<style>
	#floater-box, #button-box, #form, #posts{
	border: 1px black solid;
	padding: 10px;
	width: 100hh;
	}

	#button-box > ul {
	list-style: none;
	display: inline;
	padding: 2px;
	font-size: .7em;
	}

	#form > form > input {
	border: 0px;
	border-bottom: 1px black solid;
	margin-top: 5px;
	}
	</style>
	<body>
	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

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

	<div id = 'infobar'>
	<div id='float-box'>
	<div id = 'button-box'>
	<button id="comment-button">comment</button>
	</div>
	<div id= 'form' style="display:none;">
	<input id = 'comment' type=text></input>
	<button id="submit" >submit</button>
	</div>
	</div>

	</div>



	</body>
	<script>
	// 2. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;
	var videoId = 'M7lc1UVf-VE';
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: videoId,
	events: {
	'onReady': onPlayerReady
	}
	});
	}

	// 4. The API will call this function when the video player is ready.
	function onPlayerReady(event) {
	event.target.playVideo();
	}

	// function to pause playback and open comment form
	function commentFunc(){
	player.pauseVideo();
	document.getElementById("form").style.display = 'block';
	}

	// function to submit comment along with position
	function submitComment(pos){
	var comment = document.getElementById("comment");
	if(comment.value){
	console.log(comment.value + ' ' + pos);}
	var obj = {};
	obj.videoId = videoId;
	obj.position = pos;
	obj.comment = comment.value;
	comment.value = null;
	document.getElementById("form").style.display = 'none';
	player.playVideo();
	data.push(obj);
	console.log(data);
	}

	// Event listeners to link buttons with respective functions
	document.getElementById("comment-button").addEventListener("click",
	function(){console.log("clicked");
	commentFunc();})
	document.getElementById("submit").addEventListener("click",
	function(){
	submitComment(player.getCurrentTime());
	console.log("clicked");
	});
	// variable to store all data
	var data = [];
	var i = 0;

	</script>
	</html>