Detect event source in YouTube API

Question

I have a youtube player on a web page created with the YouTube IFrame API
When I get an onStateChange event, like in the code example:

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

When onPlayerStateChange is being called, I would like to be able to differentiate between

1. The user clicked on the player UI and changed the state (Play, Pause etc.)
2. An API call to change the state has been made (player.playVideo(), player.pauseVideo() etc)

Currently both result in exactly the same event.

Answer 1

1. I think you are going to run into the cross-domain iframe problem.

   • The iframe cross-domain policy problem - an explanation
   • Cross domain iframe issue - a solution if both the page and iframe page reside on the same domain
   • How can I track a click event of an embedded video (youtube, vimeo, etc.)? (to track play count) - Similar question and answer that this isn't possible

2. As I mentioned in my comment, there might be some useful information in the event object that is passed to the event listeners. I browsed at least two levels and could find no difference between a user click action and an API call. However, there is a lot of information in the object and possibly something that would help distinguish the two actions.

3. If your code is making the API calls, perhaps you could track this some other way. Then your code could tell if an API call was made. Maybe store the current call and a timestamp -- something along those lines.

4. Finally, maybe there is another way to capture the information you are after. Your question doesn't really specify the ultimate goal. I'd recommend exploring alternatives as a simple solution doesn't appear possible.