ahgood · April 20, 2016 03:20
diff --git a/Display Content on Youtube Video b/Display Content on Youtube Video
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Youtube sample</title>
  <style>
  #video-link {
  	position: relative;
    top: -100px;
    left: 100px;
    color: #fff;
    display: none;
  }
  </style>
 </head>
 <body>

 <div>
 <div id="player"></div>
 <div id="video-link">Hello</div>
 </div>

 <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;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'FtEK2uxRfg4',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

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

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      //var done = false;
      function onPlayerStateChange(event) {
        var linkStart, linkStop;
        var currentTime = player.getCurrentTime();
        //console.log(currentTime);
        if (event.data == YT.PlayerState.PLAYING) {
        	if(currentTime < 3){

        		linkStart = setTimeout(displayLink, 3000 - currentTime * 1000);
        	}
        }
        if (event.data == YT.PlayerState.PLAYING) {
        	if(currentTime < 9){
        		linkStop = setTimeout(hideLink, 9000 - currentTime * 1000);
        	}
        }
        //console.log(event.data);
        //console.log(YT.PlayerState.PLAYING);
        if (event.data != YT.PlayerState.PLAYING) {
          clearTimeout(linkStart);
          clearTimeout(linkStop);
        }
      }
      function displayLink() {
        document.getElementById('video-link').style.display = 'block';
      }

      function hideLink() {
        document.getElementById('video-link').style.display = 'none';
      }

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Youtube sample</title>
	<style>
	#video-link {
	position: relative;
	top: -100px;
	left: 100px;
	color: #fff;
	display: none;
	}
	</style>
	</head>
	<body>

	<div>
	<div id="player"></div>
	<div id="video-link">Hello</div>
	</div>

	<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;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: 'FtEK2uxRfg4',
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

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

	// 5. The API calls this function when the player's state changes.
	// The function indicates that when playing a video (state=1),
	// the player should play for six seconds and then stop.
	//var done = false;
	function onPlayerStateChange(event) {
	var linkStart, linkStop;
	var currentTime = player.getCurrentTime();
	//console.log(currentTime);
	if (event.data == YT.PlayerState.PLAYING) {
	if(currentTime < 3){

	linkStart = setTimeout(displayLink, 3000 - currentTime * 1000);
	}
	}
	if (event.data == YT.PlayerState.PLAYING) {
	if(currentTime < 9){
	linkStop = setTimeout(hideLink, 9000 - currentTime * 1000);
	}
	}
	//console.log(event.data);
	//console.log(YT.PlayerState.PLAYING);
	if (event.data != YT.PlayerState.PLAYING) {
	clearTimeout(linkStart);
	clearTimeout(linkStop);
	}
	}
	function displayLink() {
	document.getElementById('video-link').style.display = 'block';
	}

	function hideLink() {
	document.getElementById('video-link').style.display = 'none';
	}

	</script>

	</body>
	</html>