Javascript 无法在同一页面中复制带有autoclose的HTML5视频灯箱

我在复制带有自动关闭功能的HTML5视频灯箱时遇到问题，当我试图在同一页面中放置两个或更多的灯箱时，它崩溃了（我给了它不同的id）

来自codpen的项目令牌：

HTML

JS

（函数（$）{
$.fn.VideoPopUp=功能（选项）{
var默认值={
背景颜色：“000000”，
开场白：“视频”，
最大重量：“640”，
波塞维迪奥：错，
idvideo:“
};
var patter=this.attr（'id'）；
var设置=$.extend（{}，默认值，选项）；
var video=document.getElementById（settings.idvideo）；
函数stopVideo（）{
video.pause（）；
video.currentTime=0；
}
$（“#”+模式+”）.css（“显示”、“无”）；
$（“#”+模式+”）。附加（“”）；
$（'#opt'）.css（“背景”，settings.backgroundColor）；
$（“#”+模式+”）.css（“z-index”，“100001”）；
$（“#”+模式+”）.css（“位置”，“固定”）
$（'#'+patter+''）.css（“top”，“0”）；
$（'#'+patter+''）.css（“底部”，“0”）；
$（'#'+patter+''）.css（“右”，“0”）；
$（'#'+patter+''）.css（“左”，“0”）；
$（'#'+patter+''）.css（“填充”，“自动”）；
$（'#'+patter+''）.css（“文本对齐”，“居中”）；
$（'#'+patter+''）.css（“背景”，“无”）；
$（'#'+patter+''）.css（“垂直对齐”，“垂直对齐”）；
$（“#videCont”）.css（“z-index”，“100002”）；
$（“#”+模式+”）。追加（“&otimes；”）；
$（“#”+settings.opener+”）。打开（'单击'，函数（）{
$（“#”+模式+”）.show（）；
$（'#'+settings.idvideo+''）.trigger（'play'）；
});
$（“#closer_videopopup”）。在（'单击'，函数（）{
if（settings.pausevideo==true）{
$（'#'+settings.idvideo+''）.trigger（'pause'）；
}否则{
停止视频（）；
}
$（“#”+模式+”）.hide（）；
});
返回这个.css({
});
};
}（jQuery））；
$（函数（）{
$（“#vidBox”）.VideoPopUp({
背景色：“17212a”，
开场白：“视频1”，
最大重量：“640”，
idvideo：“v1”
});
});
document.getElementById（'v1'）。addEventListener（'ended'，myHandler，false）；
函数myHandler（e）{
document.getElementById（“vidBox”）.style.display=“无”；
window.alert（“视频结束”）；
}

有什么建议吗？

---

提前感谢

只需更改ID即可

（函数（$）{
$.fn.VideoPopUp=功能（选项）{
var默认值={
背景颜色：“000000”，
开场白：“视频”，
最大重量：“640”，
波塞维迪奥：错，
idvideo:“
};
var patter=this.attr（'id'）；
var设置=$.extend（{}，默认值，选项）；
var video=document.getElementById（settings.idvideo）；
函数stopVideo（）{
video.pause（）；
video.currentTime=0；
}
变量player=$（'#'+patter+''）；
css（“显示”、“无”）；
player.append（“”）
.css（“背景”，设置.backgroundColor）；
css（“z-index”，“100001”）；
css（“位置”，“固定”）
css（“top”，“0”）；
css（“底部”、“0”）；
css（“右”、“0”）；
css（“左”，“0”）；
css（“填充”、“自动”）；
css（“文本对齐”、“居中”）；
css（“背景”，“无”）；
css（“垂直对齐”，“垂直对齐”）；
player.find（“.videCont”）.css（“z-index”，“100002”）；
player.append（“&otimes；”）
.on（'单击'，函数（）{
if（settings.pausevideo==true）{
$（'#'+settings.idvideo+''）.trigger（'pause'）；
}否则{
停止视频（）；
}
player.hide（）；
});
$（“#”+settings.opener+”）。打开（'单击'，函数（）{
player.show（）；
$（'#'+settings.idvideo+''）.trigger（'play'）；
});
返回这个.css({
});
};
}（jQuery））；
$（函数（）{
$（“#vidBox”）.VideoPopUp({
背景色：“17212a”，
开场白：“视频1”，
最大重量：“640”，
idvideo：“v1”
});
});
$（函数（）{
$（'#vidBox2'）.VideoPopUp({
背景色：“F721A”，
开场白：“视频2”，
最大重量：“640”，
IDV视频：“v2”
});
<a href="javascript:void(0)" id="video1">-- open video --</a>
<br />
  <div id="vidBox">
    <div id="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>

            #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{
            cursor: pointer; cursor: hand;
        }

        (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;
                }
                
                $('#' + patter + '').css("display", "none");
                $('#' + patter + '').append('<div id="opct"></div>');
                $('#opct').css("background", settings.backgroundColor);
                $('#' + patter + '').css("z-index", "100001");
                $('#' + patter + '').css("position", "fixed")
                $('#' + patter + '').css("top", "0");
                $('#' + patter + '').css("bottom", "0");
                $('#' + patter + '').css("right", "0");
                $('#' + patter + '').css("left", "0");
                $('#' + patter + '').css("padding", "auto");
                $('#' + patter + '').css("text-align", "center");
                $('#' + patter + '').css("background", "none");
                $('#' + patter + '').css("vertical-align", "vertical-align");
                $("#videCont").css("z-index", "100002");
                $('#' + patter + '').append('<div id="closer_videopopup">&otimes;</div>');
                $("#" + settings.opener + "").on('click', function () {
                    $('#' + patter + "").show();
                    $('#'+settings.idvideo+'').trigger('play');

                });
                $("#closer_videopopup").on('click', function () {
                    if(settings.pausevideo==true){
                            $('#'+settings.idvideo+'').trigger('pause');
                        }else{
                            stopVideo();
                        }
                    $('#' + patter + "").hide();
                });
                return this.css({

                });
            };

        }(jQuery));




         $(function () {
                       $('#vidBox').VideoPopUp({
                            backgroundColor: "#17212a",
                            opener: "video1",
                            maxweight: "640",
                            idvideo: "v1"
                        });
                    });


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