v2.5.2
Giriş yap

Popup' ı <button> yerine <a> etiketine tıklayınca çıkmasını nasıl yaparım.

bukr3j
513 defa görüntülendi ve 1 kişi tarafından değerlendirildi
<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.

bukr3j
1045 gün önce

Bu konu hakkında başka bilgisini, fikrini paylaşabilecek yok mu?