在弹出窗口中插入视频src，jquery不起作用

我创建了一个弹出窗口来显示视频。单击链接时，“data vid link”的属性值将被复制并放置在弹出窗口内视频源的“src”属性中。单击之前，视频属性“src”为空。单击链接后，它将替换为复制的值

到目前为止，它运行良好。但当弹出窗口出现时，视频不会出现。 但奇怪的是，当我查看源代码时，视频链接被成功复制

如果我手动插入，效果很好。但这不是我想要的

<article>
<header class="bubble">Video display</header>
<a href="" data-vid-link="vid/moviesample.mp4" class="vidlnk"><img src="images/tmb-vidpl.gif"></a>
</article>

以及用于弹出和覆盖的css代码

.overlay {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(204,204,153,0.5);}
.popup {display:none;width:50%;height:auto;position:fixed;z-index:200;}
.close {position:absolute;top:-31px;right:0px;background:red;padding:0px 10px;color:white;font-size:1.4em;}
.close:before {content:"x";font-weight:bold;}
.close:hover {cursor:pointer;}
video {width: 100%!important;height: auto!important;}

$（'video source'）.attr（'src'，attr）；
$（“视频”）[0]。加载（）//
    $('.vidlnk').click(function(event){
    event.preventDefault();
    var attr = $(this).attr("data-vid-link");
        $('video source').attr('src',attr);
        $(".overlay,.popup").show();
        $(".popup").center();

    });

.overlay {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(204,204,153,0.5);}
.popup {display:none;width:50%;height:auto;position:fixed;z-index:200;}
.close {position:absolute;top:-31px;right:0px;background:red;padding:0px 10px;color:white;font-size:1.4em;}
.close:before {content:"x";font-weight:bold;}
.close:hover {cursor:pointer;}
video {width: 100%!important;height: auto!important;}

$('video source').attr('src',attr);
$("video")[0].load(); //<-newly added