Multiple video YouTube API

by Alex Alexandrov

HTML

<div>
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>
    <div id="player4"></div>
    <div id="player5"></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: 'P6k2ghtbhoU'
}, {
    id: 'player2',
    height: '390',
    width: '640',
    videoId: 'jK7lS5UKeLw'
}, {
    id: 'player3',
    height: '390',
    width: '640',
    videoId: 'RreurlQEMTw'
}, {
    id: 'player4',
    height: '390',
    width: '640',
    videoId: 'dFndtM77y3k'
}, {
    id: 'player5',
    height: '390',
    width: '640',
    videoId: 'bm117uI96lE'
}];

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,
    });
}