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>

 

Posted 2 months ago

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


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