首页 > 原创文章 > 软件开发 > 查看文章

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

所属分类:软件开发 来源: 丁老师原创 发布时间:2022-12-31 15:26 浏览: 9658 IP属地: 深圳

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>

瞧,就是这么简单!

相关文章

java如何在请求中加入参数?

在Java中,提交请求时加入参数有两种方法:一、把参数直接写在url中,如:如请求url是https://www.aaa.com,参数是name=kevin,gender=2,那么可以直接把请求url写成https://www.aaa....

fastadmin 顶部navtab 刷新页...

在使用fastadmin的日常开发中,新增了一个订单模块order,在各项功能都开发完毕后,偶然发现这个页面每次一点刷新(浏览器刷新),顶部navtab就不显示"订单管理"4个字,图标也恢复成了默认的,在网上搜了相关...

APP/小程序/网站/对接微信支付常见问题解...

现在微信支付已经超越支付宝,成为中国最广泛的在线支付方式。作为互联网电子商务服务商,如何开通对接微信支付?如何使用微信支付呢?丁老师整理一篇微信支付常见的问题解答。一、如何开通微信支付?微信支付可以在微信支付官网(https://pay...

关闭JetBrains Intellij i...

在使用JetBrains旗下的IDE产品,如Intellij idea、Webstorm、Phpstorm时,有个很讨厌的行为,就是在写代码时,如果换行输入闭合大括号}的时候,编辑器会自动对整个文档的代码进行重新格式化操作,这让一些有代...

推荐文章

宝塔"在未指定SSL默认站点时,未开启SSL...

宝塔系统相关问题解决方法

js复制对象改变原值的解决办法

在进行vue开发中,经常会遇到复制对象,赋值新对象后,原对象值被改变的问题,举个例子:let old={ "a":1, "b":2 } let new=old; new['c']=3;...

百度编辑器ueditor自动添加p标签换行的...

在实际工作中发现,有个编辑器每次保存或者修改后,都会自动在内容顶部和底部增加几行,烦人的很,一直找不到解决办法。后来发现原来是自己代码的问题。解决办法:内容在textarea中,不要换行不要写成:<textarea{content} ...

fastadmin非菜单链接,跳转菜单页面的...

在fastadmin中,一个页面的非菜单链接,想要点击后打开指定页面,并且菜单自动展开,该怎么实现呢?经过丁老师研究后,发现超级简单,废话不多说,直接上代码:<a class="btn-addtabs" href=...