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

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

相关文章

IWEBSHOP站内消息未读状态不能删除的解...

IWEBSHOP站内消息未读状态不能删除的解决办法

composer self-update 更...

1.composer版本更新文档版本号:https://getcomposer.org/do...

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

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

织梦dedecms上传图片提示Upload ...

最近有读者来函咨询,dedecms在上传图片时提示“Uploadfiletypenotall...

推荐文章

IntelliJ/phpstorm/webs...

在使用jetbrains的ide开发代码时,经常性的会输入单引号或双引号,ide默认有对于引...

fastadmin后台列表默认分页数量由10...

没那么多废话,直接上修改方法public\assets\js\require-table.j...

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

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

fastadmin btn-dialog按钮...

fastadmin里自定义按钮的btn-dialog,弹出窗口时默认大小,设置了data-a...