【jQuery】YouTubeの埋め込み動画をクリックイベントで動的に変更させる方法（YouTube API不使用）のデモページ

.wrap {
  width: 768px;
  margin: 50px auto 0;
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.movie-text {
  margin: 20px 0 0;
  text-align: center;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
}

@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}
  

$(function(){
  $('.movie-text').on('click',function(){
    const movie_id = $(this).attr("id");
   $(".iframe").attr("src","https://www.youtube.com/embed/" + movie_id + "?rel=0&loop=1&playlist=" + movie_id);
  });
});