简单的视频弹窗播放效果

<!-- 样式 -->
<style type="text/css">
.video_pop{display: block; width: 100%; height: 100%; background: #000; position: fixed; left: 0; top: 0; z-index: 999!important;  display: none;}
.video_pop .z_row{height: 100%}
.close_btn{width: 40px; height: 40px; position: absolute; right: 0; top: 0; background: url(http://www.cdtf.gov.cn/cdtfxq/xhtml/img/colse.png) no-repeat center; z-index: 100; cursor: pointer;}
#video {height: 100%;display: block;max-width: 100%;margin: 0 auto}
</style>

<!-- 封面展示 -->
<div class="z_play" data-video="视频地址" >
   <img src="视频封面" alt="">
</div>
<!-- 视频播放层 -->
<div class="video_pop" >
    <div class="z_row">
        <div class="close_btn">
        </div>
        <video id="video"  controls="controls" src="">
        </video>
    </div>
</div>
<!-- js -->
<script type="text/javascript">
var vdo = document.getElementById("video")
$(".z_play").click(function() {
	var videoscr = $(this).attr("data-video")
	$(".video_pop video").attr("src", videoscr)
	$(".video_pop").show()
	vdo.play()
})
$(".close_btn").click(function() {
	$(".video_pop").fadeOut(300)
	vdo.pause()
})

</script>