VideoSync Example

A quick demo on how to use VideoSync.

HTML

<div id="player1"></div>
<div id="player2"></div>
<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="https://rawgit.com/lw7360/videosync/gh-pages/videosync.js"></script>
<script>
    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() {
        player1 = new YT.Player('player1', {
            height: '200',
            width: '200',
            videoId: 'A9HV5O8Un6k',
            playerVars: playerVars,
            events: {
                'onReady': vidSync1.onPlayerReady,
                    'onStateChange': vidSync1.onPlayerStateChange
            }
        });

        player2 = new YT.Player('player2', {
            height: '200',
            width: '200',
            videoId: 'A9HV5O8Un6k',
            playerVars: playerVars,
            events: {
                'onReady': vidSync2.onPlayerReady,
                    'onStateChange': vidSync2.onPlayerStateChange
            }
        });
    }
</script>