JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<ul>
	<li><a href="" data-video="1" data-ytid="NXv22vzg9rE">Vídeo 1</a></li>
   	<li><a href="" data-video="2" data-ytid="m5_lIuBXKWk">Vídeo 2</a></li>
  	<li><a href="" data-video="3" data-ytid="aw3_mMB3Cc0">Vídeo 3</a></li>
</ul>

<div id="video_1" class="detalhes">
    <h2>Vídeo 1</h2>
    <div id="youtube_video_1"></div>
</div>

<div id="video_2" class="detalhes">
    <h2>Vídeo 2</h2>
    <div id="youtube_video_2"></div>
</div>

<div id="video_3" class="detalhes">
    <h2>Vídeo 3</h2>
    <div id="youtube_video_3"></div>
</div>

CSS

.detalhes {
    display: none;
}

JavaScript

$(function(){
    var player = [];
	
    function onYouTubeIframeAPIReady(VideoIndex, YouTubeId) {
        if(typeof player[VideoIndex-1] != "undefined") return;
            
        player.push(new YT.Player("youtube_video_"+VideoIndex, {
          height: '230',
          width: '454',
          videoId: YouTubeId,
          events: {}
        }));
    }
    
  function stopVideo() {
      if(player.length > 0){
		$.each(player, function(){
		    this.stopVideo();            
        });
    }
  }
    
   $('ul a').on('click', function(e){
        e.preventDefault();
       
		var video = $(this).data('video');
		var youtube = $(this).data('ytid');
       
		$('.detalhes').hide();
        $('#video_'+video).show();
       
       stopVideo();
       onYouTubeIframeAPIReady(video, youtube);
   });
});