html5 video视频自适应手机大小

林海缘

样式部分：

1. .vid-wrap{
   
2.     width:100%;background: #000;
   
3.     position:relative;
   
4.     padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
   
5.     height: 0;
   
6. }
   
7. .vid-wrap video{
   
8.     position: absolute;
   
9.     top:0;
   
10.     left: 0;
    
11.     width: 100%;
    
12.     height: 100%

复制代码

html部分：

1. <div class="vid-wrap">
   
2.     <video controls autoplay loop>
   
3.         <source src="" type="video/mp4">
   
4.     </video>
   
5. </div>

复制代码