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

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

所属分类:软件开发 来源: 丁老师原创 发布时间:2022-12-31 15:26 浏览: 11208 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>

瞧,就是这么简单!

标签:

相关文章

微信小程序开发生成普通二维码打开小程序的方法

在开发微信小程序的过程中,生成的是带有logo的小程序二维码,并且这个二维码不是通用的二维码,而是只能用微信打开的专属二维码,如图:遇到这样一个需求,生成的二维码要方形的通用二维码,并且不能带有小程序的logo。这种该怎么实现呢?经过查...

Wordpress卸载删除插件的方法

经常有使用wordpress做网站的客户咨询,wordpress里装了很多没用的插件,这些插件不知道怎么删除。今天丁老师来教给大家。wordpress删除插件的方法:1.使用管理员长啊后登录wordpress,进入Dashboard(控...

Bagisto使用常见问题与解决方法

Bagisto是一款强大的跨境电商平台软件,很多客户在初次安装和使用时,会或多或少遇到一些解决不了的情况。丁老师整理了一些常见的Bagisto问题以及解决方法以供查阅。问:安装Bagisto时出现"Command compos...

软著申请需要哪些材料?费用多少钱?多久能办理...

经常有客户咨询丁老师,想对自己开发的软件申请软件著作权,都需要什么材料,需要多少钱,办理下来需要多久呢?今天丁老师就对这个问题进行统一解答。申请软著所需材料1.软件程序源码,要求前30页和后30页,每页不少于50行代码。2.软件用户手册...

推荐文章

Composer self-update 更...

1. composer版本更新文档版本号:https://getcomposer.org/download中文网:https://docs.phpcomposer.com/03-cli.html#self-update英文网:https:/...

Uniapp开发小程序内的图片扫码

在使用uniapp开发的小程序内,打开图片,长按没有弹出菜单,无法扫码,此时只需在图片上加入show-menu-by-longpress即可完整代码:<image :src="picture" mode="...

FastAdmin btn-dialog按钮...

fastadmin里自定义按钮的btn-dialog,弹出窗口时默认大小,设置了data-area无效,经过研究后,发现了可用的方法,直接上代码不废话:table.on('post-body.bs.table',functi...

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

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