JSFiddle - React, Tailwind, and code Playground

by ko echos

HTML

<div>
    <button id="stop">Stop All Videos</button>
</div>
<div class="wrapper">
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>
</div>

<div class="wrapper">
    <div id="player4"></div>
    <div id="player5"></div>
    <div id="player6"></div>
</div>

CSS

button {
  background-color: lightcoral;
  color: white;
  display: block;
  margin: 3vw auto;
  min-width: 120px;
  border: none;
  padding: 0 1em;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 40px;
  text-align: center;
  outline: none;
  cursor: pointer;
}

.wrapper {
  display: flex;
  align-content: center;
  justify-content: space-around;
  margin-bottom: 3vw;
  
  iframe {
    width: 30vw;
    height: 16.5vw;
  }
}

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',
  videoId: 'zHwOEwpsXjY'
}, {
  id: 'player2',
  videoId: 'odFlFArp5lM'
}, {
  id: 'player3',
  videoId: '2Ap8t540Zx8'
}, {
  id: 'player4',
  videoId: 'bxRJpgp35yk'
}, {
  id: 'player5',
  videoId: '5pZsp0fZ0Ro'
}, {
  id: 'player6',
  videoId: 'YmL1rXIRtOI'
}];

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, {
    videoId: playerInfo.videoId,
    playerVars: {
      showinfo: 0,
    },
    events:{
    	'onReady' : onPlayerReady()
    	//'onStateChange': onPlayerStateChange
    }
  });
}


function onPlayerReady(event) {

console.log(event);


  
/*
	var iframeObject = event.target;
	var iframeElement = iframeObject.a;
	var videoContainer = iframeElement.parentElement;
	var play = videoContainer.querySelector(".play");
	var stop = videoContainer.querySelector(".stop");
	
	// Push current iframe object to array
	iframeObjects.push(iframeObject);

	play.addEventListener("click", function() {
		// Pause all videos currently playing
		iframeObjects.forEach(function(scopediframeObject) {
			scopediframeObject.pauseVideo();
			var scopediframeElement = scopediframeObject.a;
			scopediframeElement.classList.remove('isPlaying');
		});
		
		// Play selected video
		iframeObject.playVideo();
		iframeElement.classList.add('isPlaying');
	});
	
	stop.addEventListener("click", function() {
		iframeObject.pauseVideo();
		iframeElement.classList.remove('isPlaying');
	});
  
*/

}



$('#stop').click(function () {

	// 플레이어를 모두 로드 하여 스탑 처리
 ...