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>&times;</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&amp;modestbranding=1&amp;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.


<a href="nojavascript...void(0)" class="btn btn-primary" data-toggle="modal" data-target="#model">
    Launch demo modal
</a>
  
  <!-- Modal -->
  <div class="modal fade" id="model" tabindex="-1" role="dialog" aria-labelledby="model" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Model</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
          <button type="button" class="btn btn-primary">Kaydet</button>
        </div>
      </div>
    </div>
  </div>

sorununu çözer diye düşünüyorum