Bootstrap Snippet video popup using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<li class="col-sm-3" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">
                    <div class="thumbnail">
                        <div class="help_video">
                            <video id="1" controlsList="nodownload">
                                <source src="~/Content/helpvideos/2%20admission.mp4" type="video/mp4" />
                            </video>
                            <div class="overlay">
                                <img src="https://image.flaticon.com/icons/svg/26/26025.svg">
                            </div>
                        </div>
                        <div class="caption">
                            <h3>Admission</h3>
                        </div>
                    </div>
                </li>
                <li class="col-sm-3" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">
                    <div class="thumbnail">
                        <div class="help_video">
                            <video id="1" controlsList="nodownload">
                                <source src="~/Content/helpvideos/2%20admission.mp4" type="video/mp4" />
                            </video>
                            <div class="overlay">
                                <img src="https://image.flaticon.com/icons/svg/26/26025.svg">
                            </div>
                        </div>
                        <div class="caption">
                            <h3>Admission</h3>
                        </div>
                    </div>
                </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
 $(document).ready(function () {
            $('video').on('click', function () {
                var video = $(this).attr('src');
                $('#myModal').on('show.bs.modal', function () {
                    $(".img-responsive").attr("src", video);
                });
            });
        });
        function StopVideo() {
            var vid3 = document.getElementById("video");
            vid3.pause();
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"video popup"
Bootstrap 4.1.1 Snippet by ravindra93

Related: See More

Questions / Comments:

"video popup" Bootstrap 4.1.1 Snippet by ravindra93

Related: See More

Questions / Comments:

"video popup"
Bootstrap 4.1.1 Snippet by ravindra93