<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="player" id="player"></div>
  <button id="kXYiU_JCYtU" class="sample">video 1</div>
  <button id="_uVb7Ju8VQk" class="sample">video 2</div>
  <button id="eVTXPUF4Oz4" class="sample">video 3</div>
</body>
</html>
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 player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
	height: '360',
	width: '640',
	videoId: 'kXYiU_JCYtU',
  playerVars : {
    'autoplay' : 1,
    'showinfo' : 0,
    'controls' : 0,
  },
	events: {
	  'onReady': onPlayerReady
	}
  });
}
function onPlayerReady(event) {
  event.target.playVideo();
}
function stopVideo() {
  player.stopVideo();
}
$('.sample').click(function(){
  var vId = $(this).attr('id');
  player.loadVideoById(vId);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js