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

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

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

瞧,就是这么简单!

标签:

相关文章

关闭JetBrains Intellij i...

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

Array and string offse...

有同学咨询,在迁移网站时,出现了错误提示: Array and string offset access syntax with curly braces is no longer supported这是怎么回事呢?该同学的网站是PHP...

微信公众号获取用户的手机号的方法?

有同学在问,微信公众号,可以获取微信用户的手机号吗?答案是肯定的,当然可以!但是,因为现在越来越注重用户隐私以及数据收集,微信公众号是不能直接任意获取用户手机号的,获取用户的手机号码,也不是任意微信公众号都可以做到的,有一定的要求和限制...

Tiny编辑器无法使用的解决办法

TinyMCE编辑器,是一款轻量级的的网页内容编辑器,支持html,vue,react等前端架构。调用方法也非常简单,引入js文件,在textarea上设置id,然后调用方法即可:<scripttinymce.init({ sel...

推荐文章

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

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

PDF和图片怎么添加水印

pdf添加水印,可以使用专业的pdf工具,如Adobe Acrobat、福昕PDF阅读器等,支持文字和图片形式的添加水印,支持透明度设置、水印位置设置等。图片添加水印,可以使用photoshop软件,但是photoshop太大了,而且使用起...

低成本的政企软件系统维护服务

开源节流,控制生产成本,限制开销,是每个企业和单位都要采取的成本控制和管理措施。其中,人力成本是企业在经营中支出占比较大的一块。以IT信息化部门为例,一个负责企业软件系统运维的IT部门,至少需要配置3个员工,每个员工按照IT工程师3-5年工...

Tortoise Svn出现No Path ...

在日常开发过程中,突然发现svn无法提交和更新,出现“no path or pathfile specified on the command line”的错误,网上搜了一圈百度 google 以及stack overflow都没找到真正能...