$(function () {
	$(".myButton").on("click", function () {
	  var t = $(this).data("video-id"),
		i = $("#myIframe");
	  $(this).hide(), i.attr("src", "https://www.youtube.com/embed/" + t), i.show();
	});
  });

Bunu bir kaç tane videoyu farklı iframeler ile çıkarmak için kullanacağım, jQuery bilgim zayıf olduğundan hepsi için birer birer yazacaktım ama jQuery ile daha kısa bir şekilde yazabileceğimi öğrendim ama jQuery bilmiyorum ve JavaScript konusunda zayıfım.
Sayfam şu şekilde:

<div class="col-xl-4 col-md-6 col-sm-1">
	<div class="col-md-6" style="max-width: 510px; max-height: 290px" style="margin: 0px auto !important">
        <iframe id="myIframe5" width="510" height="290" style="display: none;" src="" frameborder="0" allowfullscreen="autoplay" style="border: 1px solid black;"></iframe>
	    <img src="../img/videos/tanjant.webp" width="510" height="290" class="myButton4" data-video-id="fB9-trYPzu4" style="width: 510px; height: 290px; object-fit: fill; border-radius: 5px;">
	<div>
	<h4>Tanjant İzleme ile Otomatik Birleştirme</h4>
</div>

Bundanda bir kaç tane var ve iframeler ayrı yerlerde -resimlerin olduğu yerde- çıkıyor.