JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-site">
  <div class="first-video">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div id="player"></div>
  </div>
  <div class="second-video">
    <div id="player2"></div>
  </div>
</div>

<script src="http://www.youtube.com/player_api"></script>

<script>
  // create youtube player
  var player;
  var player2;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'qCDxEif_9js',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: '43jHG-yH9Gc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // autoplay video
  function onPlayerReady(event) {
    if(event.target == player)
    event.target.playVideo();
    
    $('.close').click(function(){
      $('.first-video').hide(3000);
      event.target.stopVideo();
      $('.second-video').fadeIn();
    });
  }

  // when video ends
  function onPlayerStateChange(event) {
    if(event.data === 0) {
     if(event.target == player){
      $('.first-video').hide(3000);
      $('.second-video').show();
           //play second video
        player2.playVideo();
    }
    }
  }

</script>

CSS

.second-video {
      display: none;
   }