JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video">
    <iframe id='videom' width="450" height="240" src="https://www.youtube.com/embed/Y-fQGESgWwc" frameborder="0"></iframe>
</div>

<ul class="list">
    <li class="active" data-id="Y-fQGESgWwc">Video 1</li>
    <li data-id="KVGoGQwVYn8">Video 2</li>
    <li data-id="JfPdvlWQrPk">Video 3</li>
    <li data-id="qcot2ci3HqY">Video 4</li>
    <li data-id="Qqg2eipAZnQ">Video 5</li>
</ul>

CSS

li {  cursor:pointer;}
.active {  background-color:green;}

JavaScript

$('li').click(function(e) {

    $('li').removeClass('active');
    $(this).addClass('active');


    var id=$(this).data("id");
    var url='https://www.youtube.com/embed/'+id;
    $('#videom').attr('src',url);
});