Open Video link in IFRAME inside jQuery Modal Popup in jQuery

Hi iammann,

Check this example. Now please take its reference and correct your code.

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('.video').click(function () {
                var videoSource = $(this).data('video-id');
                var videoTitle = $(this).data('title');
                var iframe = document.getElementById("vimeoIframe");
                iframe.src = videoSource;
                $("[id*=videotitle]").text(videoTitle);
                $("[id*=videoModal]").modal("show");
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="item col-sm-4" style="float: left; list-style: none; position: relative;
        width: 259.5px;" aria-hidden="false">
        <a class="thumbnail video" href="#" data-video-id="https://bcove.video/2Hjh5E1" data-toggle="modal"
            data-title="The one stop solution for all things 'Innovation'.">
            <img class="img-responsive" src="Admin/UploadSlider/Video_201901210546167072479.jpg">
            <div class="main-box main-box-sub" style="text-align: center !important;">
                <span>The one stop solution for all things ‘Innovation’.</span><br>
            </div>
        </a>
    </div>
    <div class="modal videoModal" id="videoModal" tabindex="-1" role="dialog" data-keyboard="false"
        data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close video-close" data-dismiss="modal" aria-label="Close"
                        onclick="">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="color: black;">
                        <asp:Label ID="videotitle" runat="server"></asp:Label>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="embed-responsive embed-responsive-16by9">
                        <img id="loader1" src="http://www.itgeared.com/demo/images/loading.gif" width="36"
                            height="36" alt="loading gif" />
                        <iframe id="vimeoIframe" class="embed-responsive-item" webkitallowfullscreen mozallowfullscreen
                            allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Screenshot

thnks dharmendra sir ,

i resolve it by my self.d

        carouselProduct = $('.slider-pager').bxSlider({
            maxSlides:  3,
            minSlides: 3,
            slideWidth: 90,
            infiniteLoop: false,
            moveSlides: 1,
            slideMargin: 8,
            pager: false,
            nextSelector: '.slider__nav--next',
            prevSelector: '.slider__nav--prev',
            nextText: '→',
            prevText: '←',
            touchEnabled: false
        });