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

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

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

瞧,就是这么简单!

标签:

相关文章

微信小程序图片显示不了报404错误的解决办法

该问题指针对使用宝塔BT面板的同学。在日常开发微信小程序的过程中,突然发现很简单的一个图片调用报404错误了,检查URL是正确的呀,在浏览器中可以打开,并且检查了服务器文件夹,的确有这个文件,排除了缓存的可能,那么到底是什么问题造成微信...

uniapp编辑器自动提示功能导致输入错误的...

在使用uniapp编写代码时,uniapp的编辑器有一个自动提示功能,就是当你输入字符的时候,会自动弹出对应可能会输入的代码,查了下这个功能叫做“代码助手”。在使用代码助手时,经常会产生很麻烦的问题,比如在写CSS代码时,当需要输入数字...

Linux下gz文件看的到删不了的解决办法

linux下生成的gz文件,有些看的到,删除不了,一删除就提示No such file or directory,怎么办呢?不说废话,直接上解决办法:查看这个文件的 inode号#ls -lhi .根据inode号删除# find . ...

关闭JetBrains Intellij i...

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

推荐文章

小程序/APP定制开发价格标准价目表

类目价格标准备注商城小程序(小型)10-20万小型B2C/B2b商城,满足基本商城的所有功能商城小程序(中型)30-60万中型B2C/B2b商城,拥有类似淘宝、京东、拼多多的全部基本功能,可对接物流、仓储系统,支持高并发,安全性和稳定性有一...

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

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

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

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

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

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

当前在线
免费咨询