Dynamic video gallery +flowplayer + Bootstrap modal + Asp.net

We will display a dynamic video gallery from database to datalist and on clicking a video, a bootstrap modal (pop up window) will display the video, also we will add a jquery to stop video on close.

SCRIPT (Jquery+Flowplayer+Bootstrap)
--------
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

      <script src="//releases.flowplayer.org/6.0.3/flowplayer.min.js"></script>

    <link rel="stylesheet" href="//releases.flowplayer.org/6.0.3/skin/minimalist.css">

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  //Stop video

   <script>
 
        $('body').on('hidden.bs.modal', '.modal', function () {
            $('video').trigger('pause');
       
        });
    </script>


(also u can try to stop video option 2:  

  <script>

        $('body').on('hidden.bs.modal', '.modal', function () {
           jQuery('.modalid video').attr("src", jQuery(".modalid video").attr("src"));
     
        });
    </script>

)

HTML (Datalist with flowplayer and bootstrap modal)
---------

<asp:DataList ID="test_datalist" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" CellPadding="10" RepeatLayout="Table" HeaderStyle-VerticalAlign="Top">

                            <ItemStyle Height="100%" HorizontalAlign="Center" />

                            <ItemTemplate>

                           <div class="test_first_div" style="padding-left: 2px;">

                         <div class="videobox" style="margin: 0 auto; width: 99%;">

                       <div style="float: left;width:100%;">

                       <div style="text-align: center; width: 100%; height: 40px; padding-top: 5px;">

                                                <span></span>

 <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("Name") %>' CssClass="linkbtn2"></asp:LinkButton>

                          </div>

                           

                                           

                                        

      <a class="btn btn-info btn-lg" data-toggle="modal" data-target='<%# "#" + Eval("id") %>' >

        <img src="Images/Testimonies_poster.png"   style="width:100%"/>

    </a>

                                            <!-- Modal -->

  <div id='<%# Eval("id") %>' class="modal fade modalid" role="dialog">

                                                <div class="modal-dialog">

                                                    <!-- Modal content-->

                                             <div class="modal-content">

                                      <div class="modal-header">

                                   <button type="button" class="close" data-dismiss="modal">&times;</button>

                                                            <h4 class="modal-title">Modal Header</h4>

                                                        </div>

                                                        <div class="modal-body" style="height:400px;">

                                                            <div class="videoplayer" style="">

 <div class="flowplayer" data-ratio="0.4167" data-poster="Images/Testimonies_poster.png">

                         <video poster=" width="300" height="400">

                                                      <source src='<%# Eval("location") %>' type='video/mp4' />

                                                       <source src='<%# Eval("location") %>' type='video/webm' />

                                                        <source src='<%# Eval("location") %>' type='video/ogg' />

                                                          <source src='<%# Eval("location") %>' type='video/flv' />

                                                                    </video>

                                                                </div>

                                                            </div>

                                                        </div>

                                                       

                                                    </div>

                                                </div>

                                            </div>

                                           

          

                                            <div style="text-align: left; width: 100%; height: 40px;">

                                                <span>Category :</span>

            <asp:Label ID="LinkButton3" runat="server" Text='<%# Eval("category") %>'></asp:Label>

                                                <br />

                                                <span>Posted on :</span>

  <asp:Label ID="LinkButton2" runat="server" Text='<%# Eval("Posted_date") %>'></asp:Label>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </ItemTemplate>

                        </asp:DataList>

You can now code behind to get data 

like Id,Name,videolocation,posted date etc .. and bind to datalist.

 test_datalist.DataSource = idr;

 test_datalist.DataBind();