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

https://www.bilibili.com/video/av22230745/?spm_id_from=888.80997.embed_other.whitelist

视频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播放器尺寸问题？等等