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

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

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

瞧,就是这么简单!

标签:

相关文章

Wordpress安装时出现Error es...

群里有个做外贸的朋友,准备使用wordpress建个外贸站,但是自己在安装时,却安装失败,提示“Error establishing a database connection”,这是什么原因,该怎么解决呢?故障分析:1.Error e...

C#开发的Winform程序如何把dll放到...

有同学咨询,使用Visual Studio工具C#开发的Winform程序,生成后软件目录全是大量dll文件,看起来杂乱无章,有没有什么办法能让他统一放到一个文件夹里边呢?丁老师对此问题进行解答。为什么会产生大量的dll文件?因为在使用...

使用ACME申请SSL证书提示Error c...

在使用ACME申请SSL证书时,输入了命令:acme.sh --issue -d www.xxx.com --dns dns_dp --server xxx来生成证书,但是结果却返回:Error creating new order. ...

Dedecms cookies泄漏导致SQL...

dedecms cookies泄漏导致SQL漏洞

推荐文章

PDF和图片怎么添加水印

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

Python3.12提示windows No...

在使用python3.12时突然遇到提示windows No module named distutils,研究了一下,把解决办法分享出来。1.安装 setuptools,它现在也提供 distutils;2.从第三方源(如系统软件包)载入...

Mysql导入文件,source命令/php...

用phpmyadmin导入大数据库文件时,容易502 bad gateway,可以直接在linux上用mysql原生命令导入。1.上传sql文件到目录用Xshell登录服务器,将迁移过来的 sql 文件移到 home 目录下,方便下一步的...

php拼装sql语句,换行查询出错的问题解决

在php代码中,遇到复杂的sql语句,需要拼装sql语句,如:$sql='id 10;' $sql=' and( status in(1,2,3,4,5) and id not in (select id from ...