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

支付宝打赏

文章二维码

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

版权声明:本文基于《知识共享署名-相同方式共享 3.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
雷姆
拉姆
0:00