(function ($) {

            $.fn.VideoPopUp = function (options) {
                
                var defaults = {
                    backgroundColor: "#000000",opener: "video",maxweight: "640",pausevideo: false,idvideo: ""
                };
                
                var patter = this.attr('id');

                var settings = $.extend({},defaults,options);

                var video = document.getElementById(settings.idvideo);
                function stopVideo() {
                    video.pause();
                    video.currentTime = 0;
                }
                var player = $('#' + patter + '');
                player.css("display","none");
                player.append('<div class="opct"></div>')
                      .css("background",settings.backgroundColor);
                player.css("z-index","100001");
                player.css("position","fixed")
                player.css("top","0");
                player.css("bottom","0");
                player.css("right","0");
                player.css("left","0");
                player.css("padding","auto");
                player.css("text-align","center");
                player.css("background","none");
                player.css("vertical-align","vertical-align");
                player.find(".videCont").css("z-index","100002");
                player.append('<div class="closer_videopopup">&otimes;</div>')
                      .on('click',function () {
                      if(settings.pausevideo==true){
                              $('#'+settings.idvideo+'').trigger('pause');
                          }else{
                              stopVideo();
                          }
                player.hide();
                  });
                $("#" + settings.opener + "").on('click',function () {
                    player.show();
                    $('#'+settings.idvideo+'').trigger('play');

                });
                return this.css({

                });
            };

        }(jQuery));




         $(function () {
                       $('#vidBox').VideoPopUp({
                            backgroundColor: "#17212a",opener: "video1",idvideo: "v1"
                        });
                    });
         $(function () {
                       $('#vidBox2').VideoPopUp({
                            backgroundColor: "#F7212a",opener: "video2",idvideo: "v2"
                        });
                    });


         document.getElementById('v1').addEventListener('ended',function(e) {
               document.getElementById("vidBox").style.display = "none";
               window.alert('video1-ended');
            },false);

        document.getElementById('v2').addEventListener('ended',function (e) {
               document.getElementById("vidBox2").style.display = "none";
               window.alert('video2-ended');
            },false);

.closer_videopopup{
            position: absolute;
            display: table-cell;
            right: 2%;
            top: 2%;
            font-size: 32px;
            text-align: center;
            vertical-align: middle;
            padding: auto;
            cursor: default;
            background: none;
            border: none;
            color: #ffffff;


            z-index: 100004;
        }
        .opct{
            position: fixed;
            z-index: 100000;
            width: 100%;
            height: 100%;
            top: 0;
            left:0;
            bottom: 0;
            right: 0;
            filter: alpha(opacity=90);
            -moz-opacity: 0.90;
            opacity: 0.9;
        }
        .videCont{
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            padding-top: 25px;
            height: 0;
            margin: auto;
            max-width: 720px;
            height: 0;
            height: auto !important;
        }
        video{
            position: absolute;
            top: 15%;
            left: 0;
            width: 100%;
            opacity: 1 !important;

        }
        #video1,#video2{
            cursor: pointer; cursor: hand;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="video1">-- open video 1--</a>
<a href="javascript:void(0)" id="video2">-- open video 2--</a>
<br />
<div id="vidBox">
  <div class="videCont">
    <video autoplay id="v1" controls="controls">
        <source src="https://www.w3schools.com/htmL/mov_bbb.webm" type="video/webm">
        <source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
</div>
<div id="vidBox2">
  <div class="videCont">
    <video autoplay id="v2" controls="controls">
        <source src="https://www.w3schools.com/htmL/mov_bbb.webm" type="video/webm">
        <source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
 </div>