JSFiddle - React, Tailwind, and code Playground
HTML
<div id="player"></div>
<hr/>
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br>
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br>
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>
CSS
img{max-height:100p;max-width:150px;}
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '350',
videoId: 'HoVWmW0Zdmo',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
/*
mKzLoZFz8PE
-7Ok0O2nQaA
YnwsMEabmSo
*/
$(function() {
jQuery(".media-circle").on("click", function() {
player.loadVideoById(this.id);
});
});