网上有个视频插件，但是我觉得不太好用，就自己写了一个，不过各位可以参考参考，地址
制作步骤 ：
1、页面加个遮罩层，默认是隐藏的
<div class="myzzc hide"> </div>
.myzzc { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .9; z-index: 998; }
2、设置视频区域position，当然你也可以设置成:fixed，看你自己的需求了
.video-zc { position: absolute; z-index: 999; }
3、然后你有一个按钮，就是专门切换关灯和开灯的，方法如：
$(".jp-light").click(function(e) {
var this$ = $(this);
if ($('#jp_container_1').hasClass('jp-state-light')) {
$('#jp_container_1').removeClass('jp-state-light');
this$.attr('title', '关灯');
$('.res-content-video').removeClass('video-zc')
$('.myzzc').addClass('hide');
} else {
$('#jp_container_1').addClass('jp-state-light');
this$.attr('title', '开灯');
$('.res-content-video').addClass('video-zc');
$('.myzzc').removeClass('hide');
}
})
4、显示效果：
总结： z-index必须配合position才能生效
