JSFiddle - React, Tailwind, and code Playground

HTML

<h3>YouTube Player</h3>

<div id="player"></div>
<form>
    <input type="button" id="play" value="Play">
    <input type="button" id="pause" value="Pause">
    <input type="text" id="video-id" maxlength="11" value="bHQqvYy5KYo">
    <input type="button" id="load" value="Load">
</form>
<script src="https://www.youtube.com/iframe_api"></script>

JavaScript

// Player API Docs: https://developers.google.com/youtube/iframe_api_reference
// Player Params Docs: https://developers.google.com/youtube/player_parameters

// Helper functions to enable/disable a button given an element id.
function enableButton(buttonId) {
    document.getElementById(buttonId).disabled = false;
}

function disableButton(buttonId) {
    document.getElementById(buttonId).disabled = true;
}

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '210',
        width: '373',
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            controls: 0
        },
        events: {
            onReady: onReady,
            onStateChange: onStateChange,
            onError: onError
        }
    });
}

function onReady(e) {
    console.log('Player ready.');

    // Start out with the Pause button disabled.
    disableButton('pause');

    // Wire up event handlers for the buttons.
    document.getElementById('play').addEventListener('click', onPlayClick, false);
    document.getElementById('pause').addEventListener('click', onPauseClick, false);
    document.getElementById('load').addEventListener('click', onLoadClick, false);
}

function onStateChange(e) {
    console.log('State change:', e.data);

    switch (e.data) {
        case YT.PlayerState.PAUSED:
        case YT.PlayerState.ENDED:
        case YT.PlayerState.CUED:
            // TODO: Handle states where video is not playing.
            break;
        case YT.PlayerState.PLAYING:
        case YT.PlayerState.BUFFERING:
            // TODO: Handle states where video is playing/buffering.
            break;
    }
}

function onError(e) {
    console.log('Error:', e.data);
}

function onPlayClick(e) {
    // TODO: Play video.
}

function onPauseClick(e) {
    // TODO: Pause video.
}

function onLoadClick(e) {
    // TODO: Load video with id document.getElementById('video-id').value
   ...