JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css">
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8')">Video 1</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U9')">Video 2</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U5')">Video 3</a><br/>
<div id="showVideo" style="display:none;">
<iframe id="video1" width="475" height="331" frameborder="0" style="background: black;"></iframe></div>
</body>
</html>

CSS

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: lightblue;
}

div#showVideo
{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: transparent;
}

iframe#video1
{
  margin: 0px auto;
}

JavaScript

function playMe(vidCode) {
    var iDiv = document.querySelector('#showVideo');
	var iFrame=document.querySelector('#video1');
    iDiv.style.display = "block";
    iFrame.src = "http://www.youtube.com/embed/" + vidCode;
};