Change element color when clicked

Question

I have this code, it shows 1 video when clicking on a table.

Is it possible to change the color of the element that was clicked in the same way as with links? but with CSS?

Example: video 1 color red, after being clicked this option turn gray.

 <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>

   <script type="text/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(){
     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(){
      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();
       });
         </script>

Answer 1

The simplest way is to join this in the two event headphones, which will force the background color to black by joining a style directly in the element:

$(this).closest('li').css('background-color', 'black');

thus: https://jsfiddle.net/x2uoxbLy/

another option is to join a class, for example:

.visitado {background-color: black !important;}

and in the code have

$(this).closest('li').addClass('visitado');

thus: https://jsfiddle.net/x2uoxbLy/

Edit, to be persistent when loading the page:

For the browser to memorize you have to save something to the user’s server or computer, such as an entry in the localStorage for example.

Using localStorage you could do so:

var linksVisitados = Visitados();
linksVisitados.forEach(function(link) {
    var li = document.querySelector(`[data-videoid="${link}"]`).parentElement;
    li.classList.add('visitado');
});

function Visitados(link) {
    var linksVisitados = JSON.parse(localStorage.linksVisitados || '[]');
    if (!link) return linksVisitados;
    linksVisitados.push(link);
    localStorage.linksVisitados = JSON.stringify(linksVisitados);
}

and then in every callback:

$(this).closest('li').addClass('visitado');
var videoID = $(this).attr('data-videoID');
Visitados(videoID);

thus: https://jsfiddle.net/r4L6f3p2/