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

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

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

瞧,就是这么简单!

标签:

相关文章

JavaScript中的字符串取第一个词的方...

有一个需求,要求在Javascript的字符串中,取出第一个词,注意,是字符串中的第一个单词,不是字符。研究了下,给出具体代码:var str="News media should foster peace and disar...

织梦dedecms添加自定义字段后发布文章时...

最近有很多读者朋友来函,咨询新版本的织梦dedecms,在模型中新添加了自定义字段后,网站后台发布时却不显示这个字段的问题。丁老师亲自下了一个最新版的dedecms安装后,找到了后台发布时显示自定义字段的方法。

Hbuilder开发APP时,找不到真机的解...

正确的USB连线,其次打开开发者选项、USB调试,这些都是老生常谈,就不说了。在确保以上操作无误后,如果还找不到真机,关闭IDE,然后去adb的目录下,即HBuilderX\plugins\launcher\tools\adbs,把ad...

Composer更新指定包

composer更新指定包的命令composer require alibabacloud/dysmsapi-20170525:2.0.24 --ignore-platform-reqs composer update alibabac...

推荐文章

CodeIgniter框架URL如果去掉in...

在使用PHP框架CI时,有个很恶心的地方就是他的URL需要带上index.php,比如我要建一个user模块,想要实现www.xxx.com/user/的效果,但是在CI框架下必须要www.xxx.com/index.php/user这样才...

CI框架页面添加全局变量的方法

CI框架是一款很小却又非常强大的PHP程序框架,非常适合用来搭建中小型网站以及扩展程序。有同学问到,在使用CI框架时,比如要对全站的标题、公司信息、电话等设置一个全局变量,不用每个页面都写死,该怎么办呢?丁老师来教你:1.打开页面的控制器文...

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

在用photoshop设计时,有的同学会发现,在网页中设置的宽度1000px,截屏后,再用photoshop打开后测量同样图像的宽度时,这个宽度就不是1000像素,而是1200多甚至1300多,是个很奇怪的问题,丁老师检查了photosho...

FastAdmin add/edit方法不更...

问题:fastadmin的add/edit方法无法保存数据,检查了页面,name=row['name']正常传送,检查controller,也是默认的方法,什么也没有动可就是无法保存数据。解决:经过仔细研究发现,原来是htm...

当前在线
免费咨询