new YT.Player() working in development but not production

Question

It seems that new YT.Player() is working in development but not production.

var player = new YT.Player(domId, {
  events: {
    onReady: function() {
      // because of a bug in the youtube iframe api
      var p;
      player.addEventListener('onStateChange', function(e) {
        if (e.data === 1) {
          p = $interval(function() {
            var elapsedTime = Math.floor(player.getCurrentTime());
            $scope.skim.sections[len-1].startTime = elapsedTime;
            setHMS($scope.skim.sections[len-1], elapsedTime);
          }, 1000);
        }
        else {
          $interval.cancel(p);
        }
      });
      console.log("onReady fired");
      updateStartTimeAndSeekTo($scope.skim.sections[len-1]);
      player.pauseVideo();
    }
  }
});

This code is supposed to update some input fields when the video plays. It does this in development, but not production.

This is the live page. This is a video explaining how it is supposed to work. And this is the relevant GitHub code.

I really don't know how to debug this.

• For some reason the console.log() statements don't seem to be appearing in production. Without those I don't know what to do.
• I checked the network tab and it seems that the api code is being downloaded successfully.
• And heroku logs shows no errors.

Answer 1

<iframe style="height: 156.443444006753px;" src="https://www.youtube.com/embed/3eMA0GvpXl0?showinfo=0&amp;enablejsapi=1&amp;origin=http://localhost:9000" ng-class="{ 'unloadedFrame': !skim.videoUrl }" class="subsection-iframe" responsive-height="" resize-on-load="" allowfullscreen="" frameborder="0" ng-src="skim.embedUrl" id="subsection-0-0"></iframe>

Check the iframe source url contain origin=http://localhost:9000 hardcoded. If you removed the origin parameter from url. It started working.