build/iframe.html

<!DOCTYPE html>
<html data-ember-extension="1">
<!--<![endif]-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="google-site-verification" content="X-NyWbTQ-1CgZ7cvLZYPOc0BzO7PblJv201J3PJXAJI">


  <title>VideoSync</title>

  <style type="text/css">
    .panel {
      border: 1px solid lightgray;
      border-radius: 5px;
    }
    .panel-heading {
      padding: 0.5em;
      background-color: lightgray;
      border-width: 0;
      border-radius: 5px 5px 0 0;
    }
  </style>
</head>

<body id="app">
  <div class="section" id="demo" style="min-height: 0px;">
    <div id="wrap" style="display: table;">
      <div style="float: left; margin: 15px;">
        <div id="player1"></div>
        <div class="panel panel-default" style="margin-bottom: -30px;">
          <div class="panel-heading">Video Player 1's Publish Stream:</div>
          <div id="channel1" class="panel-body console" style="height: 100px; overflow: auto;">

          </div>
        </div>
      </div>
      <div style="float: left; margin: 15px;">
        <div id="player2"></div>
        <div class="panel panel-default" style="margin-bottom: -30px;">
          <div class="panel-heading">Video Player 2's Publish Stream:</div>
          <div id="channel2" class="panel-body console" style="height: 100px; overflow: auto;">

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.3.3.js"></script>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="./videosync.js"></script>

  <script>
    var consolePrint = function(msg) {
      var divId = "channel1";
      if (msg.sender === "Player2") {
        divId = "channel2";
      }
      var time = msg.time;
      if (time === null) {
        $("#" + divId).prepend("{type: " + msg.type + "}<br>");
      }
      else {
        $("#" + divId).prepend("{type: " + msg.type + ", time: " + time + "}<br>");
      }
    };

    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var playerVars = {
      modestbranding: 1,
      theme: 'light',
      showinfo: 0,
      rel: 0,
      fs: 0
    };

    var rand = Math.random().toString();

    var vidSync1 = new VideoSync("A9HV5O8Un6k" + rand, "Player1");
    var vidSync2 = new VideoSync("A9HV5O8Un6k" + rand, "Player2");

    var player1;
    var player2;

    function onYouTubeIframeAPIReady() {
      var scale = 0.50;
      player1 = new YT.Player('player1', {
        height: (390*scale)+'',
        width: (640*scale)+'',
        videoId: 'A9HV5O8Un6k',
        playerVars: playerVars,
        events: {
          'onReady': vidSync1.onPlayerReady,
          'onStateChange': vidSync1.onPlayerStateChange
        }
      });

      player2 = new YT.Player('player2', {
        height: (390*scale)+'',
        width: (640*scale)+'',
        videoId: 'A9HV5O8Un6k',
        playerVars: playerVars,
        events: {
          'onReady': vidSync2.onPlayerReady,
          'onStateChange': vidSync2.onPlayerStateChange
        }
      });
    }

    var pubnub = new PubNub({
      publishKey: 'pub-c-242fbbf1-4cc6-4153-8f20-a671697f15ec',
      subscribeKey: 'sub-c-2361676c-1e85-11e4-bbbf-02ee2ddab7fe',
      uuid: "the watcher"
    });
    pubnub.addListener({
      message: function(msg) {
        consolePrint(msg.message);
      }
    });
    pubnub.subscribe({
      channels: ["A9HV5O8Un6k" + rand]
    });
  </script>
</body>

</html>