首页 > 文章列表 > 相关知识 > 查看文章

videojs宽度高度自适应100%的方法

所属分类:相关知识 来源: 丁老师原创 更新时间:2022-12-31 15:26

videojs是一款非常不错的html video播放器插件,很多同学经常在群里问我,说丁老师这个videojs怎么设置为宽度或者高度自适应呢,不想把video的width和height写死,有没有什么办法呢。

丁老师经过研究发现啊,videojs自带两个class,一个是vjs-16-9,一个是vjs-4-3,只要使用这两个样式类,就不需要设置高度和宽度,就自动按照16:9或者4:3的比率去自适应了,使用方法如下:

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

同时,不想使用class样式来控制的话,还可以通过data-setup初始化的参数来设置,设置data-setup的fluid为true即可,实现代码如下:

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

瞧,就是这么简单!

dls6.jpg

相关文章

Clover v2.4k r4674 黑苹果...

黑苹果四叶草引导Cloverv2.4kr4674

支付宝手机付款提示ALI59错误的解决办法

支付宝-交易订单处理失败,请稍后再试。(ALI59)的解决办法

ojs系统提示无法上传图片的原因和解决办法

近日,出版社客户在使用OJS系统时,突然遇到这个问题Youdonothaveenoughsp...

photoshop宽度像素和网页宽度像素不一...

在日常设计时,有的同学会发现,在网页中设置的宽度1000px,截图用photoshop打开后...

推荐文章

苹果Iphone无法连接BMW宝马Carpl...

最近在使用iphone连接车上的carplay时,突然提示“请确定bmw已经打开并在通信范围...

python3.12提示windows No...

在使用python3.12时突然遇到提示windowsNomodulenameddistut...

phpstorm怎么取消html文件中sty...

phpstorm程序中,在打开html时总会出现对style属性的折叠和隐藏,这样在检查代码...

idea storm换行自动显示的}括号如何...

在使用idea旗下的产品,如intellijidea,phpstorm,webstorm时,...