效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>趣味视频（点击弹出）</title>
<style>
@keyframes .video-btn , .video-area{
/*设置内容由显示变为隐藏*/
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}
.video-btn , .video-area{
-webkit-animation: fadenum 5s infinite;
-moz-animation: fadenum 5s infinite;
animation:fadenum 5s infinite;
}
.video-btn{
position: absolute;
width:800px;
height: 480px;
background:black;
top:40%;
left: 40%;
margin-top: -150px;
margin-left:-300px;
display: none;
z-index: 101;
}
.video-area{
float:left;
width:720px;
height: 480px;
background:#111;
}
.video-area>video{
width:720px;
height: 480px;
}
.video-shut{
height:80px;
width:80px;
font-size:40px;
color:pink;
float:left;
text-align: center;
/*line-height: 50px;*/
background: #ddd;
display: block;
padding-top:30px;
}
#shadow{
position: absolute;
opacity: 0.5;
filter:alpha(opacity=50);
bottom:0;
left: 0;
right: 0;
top: 0;
background:black;
z-index: 100;
display: none;
}
</style>
</head>
<body>
<div class="main">
<a href="javascript:;" class="video" id="video">0</a>
</div>
<div class="video-btn" id="video-btn">
<div class="video-area" id="video-area">
</div>
<a class="video-shut" id="video-shut"></a>
</div>
<div id="shadow">0</div>
<script>
var obtn=document.getElementById('video');
var ovideo=document.getElementById('video-btn');
var oatn=document.getElementById('video-area');
var oshut=document.getElementById('video-shut');
var oshadow=document.getElementById('shadow');
obtn.onclick=function () {
ovideo.style.display='block';
oshadow.style.display='block';
oatn.innerHTML='<video src="./p/video/12.mp4" poster="" oncontextmenu="return false"></video>';
}
oshut.onclick= function () {
ovideo.style.display='none';
oshadow.style.display='none';
}
</script>
</body>
</html>