Adam Zerner Adam Zerner - 1 year ago 116
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 ( === 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 {
console.log("onReady fired");

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

enter image description here

<iframe style="height: 156.443444006753px;" src=";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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download