<!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.