JSFiddle - React, Tailwind, and code Playground

HTML

<h1>test#watch</h1>

<h4>Video</h4>
<a style="display: none" class="test_box" onclick="continue_playback(); return false" href="#"></a>
<iframe width="640" height="390" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/I3cx1s_0BDI?wmode=opaque&amp;controls=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A3000"></iframe>
<script charset="utf-8" type="text/javascript">
	// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an &lt;iframe&gt; (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', 
			{ height: '390',
width: '640',
videoId: 'I3cx1s_0BDI',
playerVars: {wmode: 'opaque', controls: 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange }
});

}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
	player.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
	alert('test')
	if (event.data == YT.PlayerState.ENDED) {
		alert('test')
	}
}

</script>
</div>