JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-box">
  <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA?rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  <p class="click">Some textSome textSome textSome textSome text</p>
</div>

<div class="video-box">
  <iframe src="https://www.youtube.com/embed/GKSRyLdjsPA?rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  <p class="click">Some textSome textSome textSome textSome text</p>
</div>

CSS

.video-box {
  width: 210px;
  background-color: #fff;
  margin: 0 20px 20px 0;
  border-radius: 5px;
  overflow: hidden;
}

.video-box p:hover {
  color: #5FA467;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {

  $(".click").click(function() {
    var $video = $(this).parent().find('iframe:first'),
      src = $video.attr('src');
    $video.attr('src', src + '&autoplay=1');
    console.log($video);
  });

});