Framework code to instantiate one or more youtube videos on a page

youtube.js

/**
 * YouTube API helper for instantiating multiple videos on a page
 * https://developers.google.com/youtube/iframe_api_reference
 */

/**
 * Helper to queue a youtube video to be instantiated with the YouTube API
 * @param {*} videoId The YouTube Video ID
 * @param {*} elementId The Element ID to instantiate as a YouTube player
 * @param {*} callback The callback to be called once the player object is available
 * @param {*} options YouTube Player options as defined here: https://developers.google.com/youtube/player_parameters
 * @param {*} events YouTube Player Event Hooks as defined here: https://developers.google.com/youtube/iframe_api_reference#Events
 */
function getYouTubePlayerObject(videoId, elementId, callback, options, events) {
    if (!window.ytQueue) {
        window.ytQueue = [];
    }
    /** For Full Config Details : https://developers.google.com/youtube/player_parameters */
    var playerVars = {
        autoplay: 0,
        enablejsapi: 1,
        modestbranding: 1,
        rel: 0,
        showInfo: 0
    }, key;

    var eventList = {
        'onStateChange': function (event) {
            if (event.data == 1) {
                //A new video started playing
                pauseAllOtherVideos(elementId);
            }
            if (events && events.onStateChange) {
                events.onStateChange(event);
            }
        },
        'onReady': function (event) {
            console.log("YTINIT");
            if (events && events.onReady) {
                events.onReady(event);
            }
        }
    };

    if (events) {
        for (key in events) {
            if (events.hasOwnProperty(key) && key != 'onStateChange' && key != 'onReady') {
                eventList[key] = events[key];
            }
        }
    }

    if (options) {
        for (key in options) {
            if (options.hasOwnProperty(key)) {
                playerVars[key] = options[key];
            }
        }
    }
    window.ytQueue.push({
        videoId: videoId,
        elementId: elementId,
        playerVars: playerVars,
        eventList: eventList,
        callback: callback
    });

    /* IMPORTANT : Replace with window.onload if jQuery or minfiedJS is not available */
    $(function () {
        initYouTubeApi();
    });
}

/**
 * Helper which is called after the YouTube API is called asynchronously
 */
function onYouTubeIframeAPIReady() {
    if (!window.ytQueue || window.ytQueue.length < 0) {
        //No YouTube videos on the page, return
        return;
    }

    if (!window.ytVideoList) {
        window.ytVideoList = [];
    }

    window.ytQueue.forEach(function (vid) {
        var player = new YT.Player(vid.elementId, {
            width: '100%',
            height: '100%',
            videoId: vid.videoId,
            playerVars: vid.playerVars,
            events: vid.eventList
        });
        window.ytVideoList.push(player);
        if (vid.callback && typeof (vid.callback) == 'function') {
            vid.callback(player);
        }
    });

}

/**
 * Helper to dynamically inject the YouTube API script tag and instantiate the onYouTubeIframeAPIReady
 * callback on the global namespace
 */
function initYouTubeApi() {
    if (!window.ytQueue || window.ytQueue.length < 0) {
        //No YouTube videos on the page, return
        return;
    }
    var el = document.getElementById("ytapiloader");
    if (el !== null) {
        //Return if already instantiated
        return;
    }

    if (!window.onYouTubeIframeAPIReady) {
        window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    }
    var tag = document.createElement('script');
    tag.id = "ytapiloader";
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

/**
 * Helper to pause other videos on a page when a video is played
 * @param {*} id Element ID of the playing video
 */
function pauseAllOtherVideos(id) {
    if (!window.ytVideoList) {
        return;
    }
    window.ytVideoList.forEach(function (vid) {
        if (typeof (vid.stopVideo) != 'function') {
            return;
        }
        if (vid.a.id != id && vid.getPlayerState() === 1) {
            //Stop videos which are playing other than that specified
            vid.stopVideo();
        }
    });
}