埋め込みYouTubeをクリックするとモーダル表示する仕組みを作ってみた。

  <!-- ▼▼▼ YouTubeのサムネールを表示 -->
  <section id="youTube">
    <div class="youTubeContentsWrap">
      <div class="iframeWrap">
        <iframe src="https://www.youtube.com/embed/RstbVK8LqIo" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>

      <div class="iframeWrap">
        <iframe src="https://www.youtube.com/embed/6yUzJonkcgU" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>

      <div class="iframeWrap">
        <iframe src="https://www.youtube.com/embed/q0IX2Ff2cQc" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>
    </div>
    </div>
  </section>

  <!-- ▼▼▼ ここにモーダルで開いたYouTubeを表示 -->
  <div id="displayYouTube"></div>

  <!-- ▼▼▼ モーダルの黒背景 -->
  <div id="modalBack"></div>

// ▼▼▼ サムネールCSS
.youTubeContentsWrap {
  display: flex;
  flex-wrap: wrap;

  .iframeWrap {
    width: 33.3%;
    cursor: pointer;

    iframe {
      display: block;
      pointer-events: none;
      margin: 3px auto;
      width: 97%;
    }
  }
}

// ▼▼▼ モーダルで開いたYouTube
#displayYouTube {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;

  iframe{
    width: 70vw; //とりあえず横幅
    position:relative;
  }
}

// ▼▼▼ モーダルの黒背景
#modalBack {
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: none;
}

// ▼▼▼ 閉じるボタン
.modalCloseBtn {
  position: fixed;
  top: calc(-28px - 1em);
  right: 0;
  z-index: 1002;
  background-color: #fff;
  width: 4em;
  text-align: center;
  padding: .125em .25em;
  cursor: pointer;
  display: none;
}

let youTube = $('#youTube .iframeWrap');

// ▼▼▼ クリックでモーダル表示する関数
let youTubePlay = (targetTag) => {
  targetTag.click(function () {
    let getIframe = $(this).html();
    if ($('#modalBack').css('display') != 'block' || $('#displayYouTube').css('display') != 'block') {
      $('#displayYouTube').html(getIframe); //YouTubeのURLを格納
      $('#modalBack').slideDown('fast'); //モーダル背景を表示
      $('#displayYouTube').append('<p class="modalCloseBtn">閉じる</p>'); //閉じるボタンを作成
      $('.modalCloseBtn').fadeIn('fast'); //作成した閉じるボタンを表示
    }
    $('#displayYouTube iframe').height(($('#displayYouTube iframe').width()) * 0.5625); // モーダル　16:9の比率
    
    // ▼▼▼ 閉じるボタンのロジック 関数内に入れないと動かない
    $('.modalCloseBtn').click(function () {
      $('#displayYouTube').html(''); //YouTubeのURLを空に
      $('#modalBack').slideUp('fast'); //モーダル背景を非表示
      $('.modalCloseBtn').fadeOut('fast'); //閉じるボタンを非表示
    });
  });
}

youTubePlay(youTube); //関数実行

// ▼▼▼ モーダルの黒背景のロジック
$('#modalBack').click(function () {
  $('#displayYouTube').html(''); //YouTubeのURLを空に
  $('#modalBack').slideUp('fast'); //モーダル背景を非表示
  $('.modalCloseBtn').fadeOut('fast'); //閉じるボタンを非表示
});

// iframeの縦幅の計算。16:9の場合
// ▼▼▼ ページ読み込み時（DOM構築時）実行
$(document).ready(function () {
  $('.iframeWrap iframe').height(($('.iframeWrap iframe').width()) * 0.5625); // サムネール 16:9の比率
});

// ▼▼▼ windowのリサイズ時実行
$(window).resize(function(){
  $('.iframeWrap iframe').height(($('.iframeWrap iframe').width()) * 0.5625); // サムネール 16:9の比率
  $('#displayYouTube iframe').height(($('#displayYouTube iframe').width()) * 0.5625); // モーダル　16:9の比率
});