JSFiddle - React, Tailwind, and code Playground

HTML

<div class="videoGallery">
    <ul>
        <li>01 </li>
        <li><span class="ytVideo" data-videoid="UGPuEDyAsU8">Opção 1</span> </li>
        <li><span class="uolVideo" data-videoid="16060482">Opção 2</span></li>
        <li><span class="close">Fechar</span></li>
    </ul>
</div>
<div class="videoGallery">
    <ul>
        <li> 02</li>
        <li><span class="ytVideo" data-videoid="nuzDvYdC_Ak">Opção 1</span></li>
        <li><span class="uolVideo" data-videoid="16041619">Opção 2</span></li>
        <li><span class="close">Fechar</span></li>
    </ul>
</div>
<div class="videoGallery">
    <ul>
        <li> 03</li>
        <li><span class="ytVideo" data-videoid="pFUMPnqnN2E">Opção 1</span> </li>
        <li><span class="uolVideo" data-videoid="16026675">Opção 2</span></li>
        <li><span class="close">Fechar</span></li>
    </ul>
</div>



<style>
    .videoGallery {
        margin-bottom: 5px;
    }
    
    .videoGallery ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }
    
    .meuVideo {
        display: inline-block;
        background-color: Black;
        color: #fff;
        padding: 0px 3px;
        border: 0px solid steelblue;
    }
    
    .videoGallery li {
        display: inline-block;
        background-color: #A52A2A;
        color: #fff;
        padding: 4px 10px;
        border: 1px solid Black;
    }
    
    .videoGallery li:first-child,
    .videoGallery li:last-child {
        background-color: initial;
        color: #0000;
        background-color: Black;
    }
    
    .videoGallery span {
        cursor: pointer;
    }
    
    i.nowPlaying {
        font-size: 13px;
        background: Black;
        margin-left: 15px;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

JavaScript

var ytVideo = $('.videoGallery .ytVideo');
  var dailyMvideo = $('.videoGallery .dailyMvideo');
  var uolVideo = $('.videoGallery .uolVideo');
  var html5bgvideo = $('.videoGallery .html5bgvideo');
  var liHeight = $('.videoGallery li').height();

  // Youtube Video
  ytVideo.click(function() {
      $(this).closest('li').css('background-color', 'black');
      var videoID = $(this).attr('data-videoID');
      var videos = $('<div class="meuVideo"> <iframe width="560"    height="315" src="https://www.youtube.com/embed/' + videoID + '?autoplay=1" frameborder="0" allowfullscreen></iframe> </div>');

      $('.meuVideo, .nowPlaying').remove();
      $(this).parents().eq(2).append(videos);
      $('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);
  });

  // UOL Video
  uolVideo.click(function() {
      $(this).closest('li').css('background-color', 'black');
      var videoID = $(this).attr('data-videoID');
      var videos = $('<div class="meuVideo"> <video width="100%"  controls="controls" autoplay="true" src="http://video25.mais.uol.com.br/' + videoID + '.mp4?r=http://player.mais.uol.com.br" type="video/mp4"" frameborder="0" allowfullscreen></video> </div>');

      $('.meuVideo, .nowPlaying').remove();
      $(this).parents().eq(2).append(videos);
      $('<i class="nowPlaying">▼ Reproduzindo ...</i>').insertAfter(this);


  });

  // Fechar Videos
  $('.close').click(function() {
      $('.meuVideo, .nowPlaying').remove();
  });