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

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

瞧，就是这么简单！

上一篇：bt宝塔升级方法

下一篇：html网页调用打开微信小程序白屏的问题解决方法

bootstrap selectpicker...

selectpicker组件，广泛应用于基于bootstrap的框架中，比如fastadmin框架等。在使用时，经常有同学问到，在对select进行操作后，比如添加和删除option，但是select没有更新，这是怎么回事呢？请看代码：...

CSS常用字体及网页引用方式

1.字体列表及引用链接鸿蒙字体-B站400 字重 CSS：//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css500 字重 CSS：//s1.hdslb.com/bfs/stat...

editplus正则匹配备份

匹配a链接正则：<a href="[^"]+"匹配数字替换，如替换sql语句的(2,'a','b')为(2,2,'a','b')查找项：...

photoshop打不开任何文件的解决方法

有同学反应，在使用photoshop时，忽然文件打不开了，先后试了下psd格式、jpg格式、png格式的，等等等等，全都打不开，重启了电脑也不行，这是怎么回事呢？经过丁老师研究后发现，这是因为安装的是非正版photoshop，在使用时，...

推荐文章

mui的toast修改位置居中

mui的toast默认是在底部的，并且没有参数设置位置，经过研究发现可以通过修改css的方式设置位置，具体方法如下：1.muitoast设置type为divmui.toast('hello', {type: 'div...

如何删除idea软件搜索时的find mas...

在使用idea系列的配套软件时，如intellijidea、PhpStorm、WebStrom时，在搜索文件时，右上角的filemask可以筛选指定类型的文件。但是有时候可能会输入错误，产生多个记录，而且没办法删除，在以后的开发中经常会耽误...

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

没那么多废话，直接上修改方法public\assets\js\require-table.jspageSize: Config.pagesize || localStorage.getItem("pagesize") |...

uniapp开发小程序和app时，根据登录状...

在使用uniapp开发app和小程序时，经常会用到打开app/小程序时，根据登录状态判断是显示首页还是跳转登录页的功能。此功能在app.vue的onlaunch方法中定义，方法如下：onLaunch: function() {const _...