JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player"></div>

    <script>
      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: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE'
        });
      }

      function loader(vid) {
        player.cueVideoById(vid, 5, "large");
      }      
    </script>
  
	<ul>
			<li><a href="javascript:void(0);" onclick="loader('eX0Iy93nqKs');"><img src="http://i1.ytimg.com/vi/eX0Iy93nqKs/default.jpg" />One</a></li>
			<li><a href="javascript:void(0);" onclick="loader('aYsGwLWqWI4');"><img src="http://i1.ytimg.com/vi/aYsGwLWqWI4/default.jpg" />Two</a></li>
			<li><a href="javascript:void(0);" onclick="loader('Vlkrm8nLCJo');"><img src="http://i1.ytimg.com/vi/Vlkrm8nLCJo/default.jpg" />Three</a></li>
	</ul>