Open Video link in IFRAME inside jQuery Modal Popup in jQuery

Last Reply 2 months ago By iammann

Posted 2 months ago

modal not opening in chrome browser

<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>

 

            $(function () {
                $('.video').click(function () {
                    var videoSource = $(this).data('video-id');
                    var videoTitle = $(this).data('title');
                    var iframe = document.getElementById("vimeoIframe");
                    iframe.src = videoSource;
                    $("#MainContent_videotitle").text(videoTitle);
                    $("#videoModal").modal("show");
                });
            });

 

     <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>

 

You are viewing reply posted by: iammann 2 months ago.
Posted 2 months ago

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
        });