Youtube on player state change

by Marco Abate

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="video">
  <div id="player"></div>
</div>
<div class="popup">
  Ciao sono il popup
</div>

SCSS

.video {
  background: #fff;
  min-height: 100px;
  #player {
    width: 100%;
    height: 200px;
  }
}

.popup {
  background: white;
  border: 1px solid #ddd;
  text-align: center;
  transition: all .3s ease;
  &.scroll {
    margin-top: 100px;
  }
}

JavaScript

var tag = document.createElement('script');
var videoID = 'M7lc1UVf-VE';

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

window.onYouTubeIframeAPIReady = onYTready();

function onYTready() {
	player = new YT.Player('player', {
		height: '320',
		width: '400',
		videoId: videoID,
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

function onPlayerReady() {}

function onPlayerStateChange(event) {
	if(event.data == YT.PlayerState.PLAYING) {
  	$('.popup').addClass('scroll');
  	console.log('sono in play');
  } else {
  	$('.popup').removeClass('scroll');
  	console.log('non sono in play');
  }
}