1.理清思路。

2.關鍵在於獲取瀏覽器當前的寬度與高度。

3.採用screen.availWidth和screen.availHeight。

html:

<div class="dm-box">
<div class="danmu">
<video class="video">
<source src="www.jq22.commi4.webm" type="video/mp4">
</video>
<div class="kz-box">
<button type="button" class="bf glyphicon glyphicon-play-circle"></button>

<button type="button" class="ylj glyphicon glyphicon-volume-down"></button>
<div class="progress">s
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 </div>
</div>
<button type="button" class="ylj1 glyphicon glyphicon-volume-up"></button>
<button type="button" class="backward glyphicon glyphicon-backward"></button>
<button type="button" class="play glyphicon glyphicon-play"></button>
<button type="button" class="pause glyphicon glyphicon-pause"></button>
<button type="button" class="forward glyphicon glyphicon-forward"></button>
<button type="button" class="resize-full glyphicon glyphicon-resize-full"></button>
<button type="button" class="resize-small glyphicon glyphicon-resize-small"></button>
</div>

</div>

css:

.kz-box{
width:500px;
height:50px;
position:absolute;
right:20px;
bottom:0px;
}
.bf{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:24px;
color:#CCCCCC;

}


.ylj{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
margin-left:10px;
font-size:25px;
color:#CCCCCC;
}
.ylj1{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
margin-left:10px;
font-size:24px;
color:#CCCCCC;
}
.backward{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
margin-left:3%;
}
.play{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
}
.pause{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
margin-left: -30px;
    display: none;
}
.forward{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
}
.resize-full{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
margin-left:16px;
}
.resize-small{
width:30px;
height:30px;
padding:0px;
margin-top:10px;
background-color:#666666;
border:0px;
float:left;
font-size:20px;
color:#CCCCCC;
margin-left:16px;
}
.progress{
width:150px;
height:5px;
float:left;
margin-top:25px;
background-color:#CCCCCC;
border-radius:3px;

}

jq:

$(document).ready(function(){
var w=screen.availWidth;
var h=screen.availHeight;
$(".resize-full").click(function(){
$(".video").css({"width":w+"px","height":h+"px"});
$(".kz-box").css({"margin-bottom":"-37%","position":"absolute","margin-right":"-50%"});
$(".danmu-r,.input-box2").hide();
});
$(".resize-small").click(function(){
$(".video").css({"width":"100%","height":"90%"});
$(".kz-box").css({"margin-bottom":"0px","position":"absolute","margin-right":"0px"});
$(".danmu-r,.input-box2").show();
 })
 });