Multiple video YouTube API

by nicomiceli

HTML

<div>
    <button id="stop">Detener Videos</button>
</div>
<div>
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>
    <div id="player4"></div>
    <div id="player5"></div>
    <div id="player6"></div>
    <div id="player7"></div>
    <div id="player8"></div>
    <div id="player9"></div>
    <div id="player10"></div>
    <div id="player11"></div>
    <div id="player12"></div>
</div>

JavaScript

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 playerInfoList = [{
    id: 'player1',
    height: '390',
    width: '640',
    videoId: 'iIE_yzfXsXY'
}, {
    id: 'player2',
    height: '390',
    width: '640',
    videoId: 'pwbjX337Jj8'
}, {
    id: 'player3',
    height: '390',
    width: '640',
    videoId: 'EMMN51rTlk8'
}, {
    id: 'player4',
    height: '390',
    width: '640',
    videoId: 'UQbRBDDHfLw'
}, {
    id: 'player5',
    height: '390',
    width: '640',
    videoId: 'mWfVha4mRUs'
}, {
    id: 'player6',
    height: '390',
    width: '640',
    videoId: 'GrJNvuV27Uo'
}, {
    id: 'player7',
    height: '390',
    width: '640',
    videoId: 'jLrYqt9uQew'
}, {
    id: 'player8',
    height: '390',
    width: '640',
    videoId: 'MAhVU1CpMsg'
}, {
    id: 'player9',
    height: '390',
    width: '640',
    videoId: 'PlRVVHzXA08'
}, {
    id: 'player10',
    height: '390',
    width: '640',
    videoId: 'hroHQrv_l6U'
}, {
    id: 'player11',
    height: '390',
    width: '640',
    videoId: '4ZXmnz2aEzU'
}, {
    id: 'player12',
    height: '390',
    width: '640',
    videoId: '0cO309N22KE'
}];

function onYouTubeIframeAPIReady() {
    if (typeof playerInfoList === 'undefined') return;
    
    for (var i = 0; i < playerInfoList.length; i++) {
        var curplayer = createPlayer(playerInfoList[i]);
        players[i] = curplayer;
    }
}

var players = new Array();

function createPlayer(playerInfo) {
    return new YT.Player(playerInfo.id, {
        height: playerInfo.height,
        width: playerInfo.width,
        videoId: playerInfo.videoId,
    });
}

$(document).ready(function () {
    $('#stop').click(function () {
        //loop players array to stop them all
        $(players).each(function (i) {
            console.log(this);
            this.stopVideo();
       ...