JSFiddle - React, Tailwind, and code Playground

HTML

<div class="videoContain-big">
        <p class="video-1">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/87O_YA4rLyk" frameborder="0" allowfullscreen></iframe>
        </p>
        <p class="video-2">
         <iframe width="560" height="315" src="http://www.youtube.com/embed/nQ2TsPhsWTA" frameborder="0" allowfullscreen></iframe></iframe>
        </p>
       
</div>

 <div class="video-section">
        <ul>
          <li video="video-1">Click here to Change Video 1</li>
          <li video="video-2">Click here to Change Video 2</li>
        </ul>
</div>

CSS

.videoContain-big p{display:none}

JavaScript

$(function(e) {
            $(".video-1").show();
            $(".video-section ul li:first").hide();
            //$(".video-section > ul > li:nth-child(3n+0)").addClass("mr0");
            
            $(".video-section ul li").click(function(e) {
                    $(".video-section ul li").show();
                    $(this).hide();
                $("iframe").click(function(){
                    alert("asd");
});
                    $(".videoContain-big p").hide();

                    var currVideo = $(this).attr("video");
                        $("."+currVideo).show();
                });
            });