请选择 进入手机版 | 继续访问电脑版

林海谐缘

 找回密码
 人工审核注册
搜索
查看: 190|回复: 0

html5 video视频自适应手机大小

[复制链接]
发表于 2020-7-25 21:05:26 | 显示全部楼层 |阅读模式
样式部分:
  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>
复制代码
您需要登录后才可以回帖 登录 | 人工审核注册

本版积分规则

QQ|手机版|小黑屋|林海谐缘论坛 ( 豫ICP备07015145号 ) |
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论 | 管理员:linker(QQ:80555546) 群:3067918

GMT+8, 2020-8-14 17:15 , Processed in 0.028814 second(s), 5 queries , File On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表