JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/player_api"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$('#javaImg').on('click', function () {
    var player = new YT.Player('playerContainer', {
        // height: '1080',
        // width: '1920',
        videoId: '11mSxGppp2s',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'showinfo': 0,
            // and other options
        },
        events: {
            'onReady': function (event) {
                // Write your logic to HIDE the image here
                event.target.playVideo(); // play video
            },
            'onStateChange': function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // Write your logic to UNHIDE the image here
                }
            }
        }
    });
}
</script>

<img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/java.png" id="javaImg">
<div id="playerContainer">
  <div id="player" width="300" align="left" height="238" style="margin-right:30px;"></div>
</div>

JavaScript

var player;
$("#javaImg").click(function(){
if($("#player").is("div"))
{
  $(this).hide();
  player = new YT.Player('player', {
    height: '335',
    width: '596',
    playerVars: { 'controls': 1,'autohide':1},
    videoId: 'r59xYe3Vyks',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  
}
  else {
    player.autohide=1;
    player.playVideo();
  }
  // when video ends
  function onPlayerReady(event) {
    event.target.playVideo();
  } 
    
  function onPlayerStateChange(event) {        
    if(event.data === 0) {            
      $("#player").remove(); 
      $("#playerContainer").append('<div id ="player" width="300" align="left" height="238" style="margin-right:30px;"></div>');
      $("#javaImg").show();
    }
  }
});