今天早上研究了一下该怎么让一个网页的视频窗口保持宽高比,之前也有尝试过查看相关方法,后面没有弄成功。今天再次带着目的去寻找,终于找到了一个方案。记载如下:

使用方法

复制style标签内的css内容到主题的style.css文件中,在插入视频的地方增加一个包含div的标签,类名nks-wrap。

复制到style.css的内容

添加包含标签(div内为视频标签)

 

具体的原理

具体的原理主要是通过在视频标签前面增加一个包含div,通过包含div全宽,内容盒子,高度为0,给下填充撑开。padding-bottom:56%; 计算的16/9的宽高比,你也可以通过修改参数保持不同的宽高比。视频给绝对定位,宽高100%。

示例测试视频:

有问题或者改进方法qq:1500493432