视频,缩略图沾满需要修改下css 。按钮剧中要几个样式 vjs-big-play-centered
<!-- 修改 -->
<div class="video-play">
<div class="video-box">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
poster="image/services.png"
data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
</video>
</div>
</div>
视频满屏播放需要修改下样式
.video-play{
margin: 0 auto;
max-width: 600px;
position: relative;
}
.video-play .play-button{
position: absolute;
z-index: 5;
left: 50%;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 50px;
border-radius: 10px;
background-color: rgba(0,0,0,.6);
}
.video-box{
height: 400px;
}
video{
object-fit: cover;
}
.vjs-poster{
background-size: cover;
}
.video-js{
width: 100%;
height: 100%;
}
@media (max-width:750px) {
.video-box{
height: 240px;
}
}