Encapsulate the Youtube Iframe API with RequireJS

youtubePlayer

/**
 * This module uses global declared functions to communicate with the youtube api (iframe)
 * Communication to parent (implementation) modules is done with jquery trigger.
 *
 *  basic exsample:
 *  <div class="video-wrapper">
 *      <div id="unique-id-here"
 *      </div>
 *  </div>
 *
 *  <script>
 *  require([myweb/youtubePlayer], function (player) {
 *
 *      player.init(document.getElementById("unique-id-here"),{
 *          videoId : 'OdLfMqoMOqw'
 *      });
 *
 *  });
 *
 *  More details to be found at www.semantize.nl/wrappingyoutube/
 *
 */

define(['myweb/jquery'], function ($) {

    var playerAPIReady = false;
    var playerqueue = [];

    /**
      * These scoped globals will contain the global functions called by the youtube api.
      */
    window.youtubePlayer = {};
    window.youtubePlayer.onYPReady = {};
    window.youtubePlayer.onYPStateChange = {};

    var DEFAULT_CONFIG = {
        html5: 1,
        autoplay: 0,
        controls: 1,
        height: '390',
        width: '640',
    };

    /**
     * Load the youtube Iframeapi into the dom.
     */
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    /**
     * Will let the module know that the youtube api is loaded an ready to go.
     */
    window.onYouTubeIframeAPIReady = function () {
        playerAPIReady = true;
        if (playerqueue.length !== 0) {
            _resolveQue();
        }
    };
    /**
     * Will resolve player requests that could not be created (Iframeapi was not ready).
     */
    var _resolveQue = function () {
        var i = 0;
        for (i; i <= playerqueue.length; i++) {
            init(playerqueue[0].elm, playerqueue[0].options);
            playerqueue.shift();
        }
    };

    /**
     * @alias module:youtube player Module
     * @class YoutubePlayer
     * @constructor
     * @param {Object} jquery elm
     * @param {Object} [options]
     */
    var YoutubePlayer =  function (elm, options) {

        var playerAPI = {};
        var config = {};


    /**
     * Creates publish and subsribe functions for the player instance.
     * 1) To detect if player ready.
     * 2) To detect if player state has changed.
     * 3) provide function to start playing video using javascript.
     * 4) provide function to stop playing video using javascript.
     * 5) provide function to return video state to 0 sec.
     */
        var _createPubsubFunctions = function(id) {

            JElm = $('#'+id);

            window.youtubePlayer.onYPReady[id] = function () {
                JElm.trigger('ready');
            };

            /**
             * event.data will return the following player states
             * -1 (unstarted), 0 (ended), 1 (playing), 2 (paused), 3 (buffering), 5 (video cued)
             */
            window.youtubePlayer.onYPStateChange[id] = function (event) {
                JElm.trigger('StateChange', {state: event.data});
            };

            JElm.on('play', function () {
                playerAPI.playVideo();
            });

            JElm.on('stop', function () {
                playerAPI.stopVideo();
            });

            JElm.on('reset', function () {
                playerAPI.seekTo(0, true);
            });

        };


        var _startNewPlayer = function () {

            playerAPI = new YT.Player(config.elmId, {
                height: config.height,
                width: config.width,
                videoId: config.videoId,
                playerVars: {
                    html5: config.html5,
                    autoplay: config.autoplay,
                    controls: config.controls
                },
                events: {
                    'onReady': youtubePlayer.onYPReady[config.elmId],
                    'onStateChange': youtubePlayer.onYPStateChange[config.elmId]
                }
            });

        };


        var init = function () {
            options.elmId = elm.id;
            config = $.extend({}, DEFAULT_CONFIG, options);
            _createPubsubFunctions(options.elmId);
            _startNewPlayer();
        }();

    };



    /**
     * Factory method
     * @param {DOM Object} elm
     * @param {Object} [options]
     */
    var init = function (elm, options) {
        if (playerAPIReady) {
            return new YoutubePlayer(elm, options);
        } else {
            playerqueue.push({ elm: elm, options: options });
        }

    };

    /**
     * Module API
     * @public
     * @return {Object}
     */
    return {
        init: init
    }

});