QQ爹の博客 QQ爹の博客

css 视口单位 vw,vh 的妙用 (embed 篇)

in 代码相关 文章转载请注明来源!

如上视频 [av9214469],使用的是 embed 标签,大家都知道 embed 的播放器很难自适应,不是过分拉伸改变视频比例,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸。

前天,在往博客上折腾 B 站视频时,无意间灵机一动,想到了个好主意,就是使用 vw 单位,配合使用 calc。

只需级行 css 就解决了

核心 css 代码,锁死视频比例 16:9

embed { height: calc(9 * 100vw/ 16);width: 100%;
}

宽度设置为 100%, 宽度铺满父级 div【假设父级 div 就是真个屏幕】,高度设置为屏幕的宽度乘以 9 /16。

因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的 div 也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。

这里我得电脑端测栏加边距的宽度大约是 330px, 手机端的边距太小就忽略不算了

对应的 css 就是这样

@media only screen and (min-width:768px){
embed{height: calc(9 * (100vw - 330px)/ 16);  width: 100%;}
}
@media only screen and (max-width:767px){
embed{ height: calc(9 * 100vw/ 16);width: 100%;}
}

其实就是对于电脑端设备,在宽度设置上,提前减去 330px,然后在乘 9 /16。

原理就是这样,因为我也没有去仔细计算我的模板边距测栏宽度总和是多少,所以比例不可能特别精准,还有就是现在iframe同样可以用上述方法。

本来,文章写道这里就应该结束了,但是突然想到了 香菇社长 那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。

怎么办呢?想了一下,觉得这样比较简单!在电脑端 css 加入下面的东东

max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/
max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的16/9*/

这样不管屏幕多奇葩,应该也能保证视频播放器尺寸 16:9 了哈!如果想要其他尺寸对应的数字改一下就好了。

至于有黑边问题,这个原因有很多,视频素材比例问题?embed 播放器尺寸问题?等等

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《 署名 - 非商业性使用 - 相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/css-vw-embed.html (转载时请注明本文出处及文章链接)

视频 cssvwvh
发表新评论
已有 7 条评论
  1. Shawn
    ShawnMac OS XSafari浏览器
    回复

  2. Your best flower
    Your best flower其他编辑Windows 7谷歌浏览器
    回复

    登……登录?

    1. Jrotty
      Jrotty本文作者Windows 7谷歌浏览器
      回复

      @Your best flower 这样自己登录方便

  3. 尚寂新
    尚寂新Linux谷歌浏览器
    回复

    听前期在b站的老人说陈睿上台之后原本是把b站api项目取消掉的 但是api的接口还能用 你可以问问逸国人他们可能还记得

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @尚寂新 知道了也不会用,我是渣渣

  4. 后宫学长
    后宫学长Windows 10谷歌浏览器
    回复

    看不明白...
    视频内容分辨率是不变了,就是播放器窗口上下会有黑边...
    高分辨率下的黑边更大。

    1. Jrotty
      Jrotty本文作者Android N神马浏览器
      回复

      @后宫学长 我也很绝望啊

PREVIOUS NEXT
雷姆
拉姆