YouTube-Google Slides Sync

by Weston Ruter

HTML

<iframe id="player"
	width="420" 
	height="315" 
	src="//www.youtube.com/embed/caBzb0FyD0A?enablejsapi=1&origin=http://fiddle.jshell.net/" 
	frameborder="0" 
	allowfullscreen>
</iframe>
<!--
<iframe class="slides" src="https://docs.google.com/presentation/d/1voRLmbaHIbw6wENXvegSGdoj7ID6q_IEqoJu9SicvZE/embed?start=false&loop=false&delayms=3000" 
	frameborder="0" 
	width="480" 
	height="389" 
	allowfullscreen="true" 
	mozallowfullscreen="true" 
	webkitallowfullscreen="true">
</iframe>
-->

JavaScript

(function () {
    var script, refNode;
    script = document.createElement('script');
    script.src = 'https://www.youtube.com/iframe_api';
    script.async = true;
    refNode = document.currentScript || document.getElementsByTagName('script')[0];
    refNode.parentNode.insertBefore(script, refNode);
}());

var youtube_players = [];
function onYouTubeIframeAPIReady() {
    jQuery('iframe[src*=youtube]').each(function ( i, iframe ) {
        if ( ! iframe.id ) {
            iframe.id = 'youtube-video-' + i;
        }
        // @todo The player is not initializing
        var player = new YT.Player( iframe.id, { events: {
            onReady: function (e) {
                console.info(e)
            },
            onPlayerReady: function ( event ) {
                console.info(event)
            },
            onError: function () {
                console.info(event)
            },
            onStateChange: function () {
                console.info(event)
            }
        } } );
        youtube_players.push( player );
    });
}