视频demo

如上视频[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播放器尺寸问题?等等

版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/css-vw-embed.html
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!