Adam Zerner Adam Zerner - 2 months ago 9
Javascript Question

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

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

enter image description here

<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.