Bu kodu nasıl kısaltabilirim?
$(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.
buttonlara aynı class ı verip ve data attribute ü olarak iframe in idsini girerek aşağıdaki gibi tek 1 kod ile birden fazla iframe ve button u çalıştırabilirsin.
eğer iframeler aynı yerdeyse sadece görünürlüğünü değiştirerek işlem yapıyorsan tüm videoları aynı iframe ile kullanabilirsin.
<button class="myButton" data-video-id="8A7RWDgkXgg">
Video 1
</button>
<button class="myButton" data-video-id="pl8W3ypHmbk">
Video 2
</button>
<iframe id="myIframe" ></iframe>
$(function(){
$(".myButton").on("click",function(){
$(this).hide();
$("#myIframe").attr("src",`https://www.youtube.com/embed/${$(this).data("video-id")}`).show();
})
});