I noticed some odd behavior on a project I'm working on, so I decided to isolate my variables and take the bare-bones code straight from the youtube iframe API documentation, and I still see the same thing.When my video plays through the first time, it all works as expected. But if I hit the "replay" button, onPlayerStateChange (with event.data==1 / "playing") fires twice, right on top of each other.Any idea why this is happening, and how I could get the "playerstatechange" of "playing" to only fire once on replay?
<!DOCTYPE html><html><body><!-- 1. The <iframe> (and video player) will replace this <div> tag. --><div id="player"></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: 'cOgj_5lYijo', events: {'onStateChange': onPlayerStateChange } }); } // 5. The API calls this function when the player's state changes. function onPlayerStateChange(event) { if(event.data==1){ console.log("onplayerstate change happening: ",event)} }</script></body></html>