Popup' ı <button> yerine <a> etiketine tıklayınca çıkmasını nasıl yaparım.
<div class=container>
<h1>Play YouTube or Vimeo Videos in Bootstrap 4 Modal</h1>
<button type=button class="video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/Jfrjeg26Cwk data-target=#myModal>
Play Video 1 - autoplay
</button>
<button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/IP7uGKgJL8U data-target=#myModal>
Play Video 2
</button>
<button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/A-twOC3W558 data-target=#myModal>
Play Video 3
</button>
<button type=button class="btn btn-primary video-btn" data-toggle=modal data-src="https://player.vimeo.com/video/58385453?badge=0" data-target=#myModal>
Play Vimeo Video
</button>
<div class="modal fade" id=myModal tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
<div class=modal-dialog role=document>
<div class=modal-content>
<div class=modal-body>
<button type=button class=close data-dismiss=modal aria-label=Close>
<span aria-hidden=true>×</span>
</button>
<div class="embed-responsive embed-responsive-16by9">
<iframe class=embed-responsive-item src="" id=video allowscriptaccess=always allow=autoplay></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 kullanılarak yapılan bir popup. Butonlara basınca video çıkıyor. "X" tuşuna yada videonun olmadığı herhangi bir yere basıldığında ise popup gidiyor.
Javascript Kodu:
$(document).ready(function() {
var n;
$(".video-btn").click(function() {
n = $(this).data("src")
}), console.log(n), $("#myModal").on("shown.bs.modal", function(o) {
$("#video").attr("src", n + "?autoplay=1&modestbranding=1&showinfo=0")
}), $("#myModal").on("hide.bs.modal", function(o) {
$("#video").attr("src", n)
})
})
ul li içerisine bir Youtube iconuna link ekleyerek çıkartmak istiyorum. Buton yerine a etiketini kullanıp link ile çıkartmak istiyorum. Butonu youtube iconuna çevirebiliyorsam o da olur.