YouTubeプレーヤーAPI YouTubeを複数設置

YouTubeプレーヤーAPIでYouTubeを複数設置する | cly7796.net

http://cly7796.net/wp/javascript/multiple-installation-in-youtube-player-api/

HTML

1 2 3 4

<div id="sample01"></div> <div id="sample02"></div> <div id="sample03"></div> <div id="sample04"></div>

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

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 ytPlayer = []; // プレーヤーのサイズ var ytWidth = 640; var ytHeight = 390; // 各動画情報 var ytData = [     {         id: 'NcgBHHMbSGg',         area: 'sample01'     }, {         id: 'wbqOCoBkGvg',         area: 'sample02'     }, {         id: 'idIHKr4GvPY',         area: 'sample03'     }, {         id: 'ke8aMAvP7pk',         area: 'sample04'     } ];   // 各プレーヤーの埋め込み function onYouTubeIframeAPIReady() {     for(var i = 0; i < ytData.length; i++) {         ytPlayer[i] = new YT.Player(ytData[i]['area'], {             width: ytWidth,             height: ytHeight,             videoId: ytData[i]['id'],             playerVars: {                 rel: 0             },             events: {                 'onReady': onPlayerReady             }         });     } }   // 各プレーヤー準備完了後の処理 function onPlayerReady(e) {     for (var i = 0; i < ytData.length; i++) {         if(e.target.getIframe().id == ytData[i]['area']) {             console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');         }     }; }