raghavmittal101/index.html

## 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>