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

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

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

瞧,就是这么简单!

标签:

相关文章

网易企业邮箱客户端SSL端口设置

最近经常配置OJS系统的(Open Journal Systems期刊管理系统 )发信功能,客户使用的是网易企业邮箱,根据网易企业邮箱帮助中心的文档显示,smtp服务加密ssl的端口是994,如图:结果设置了以后,怎么也发不了邮件,就在...

Android Studio 打包APP制作...

在使用android studio打包app时,需要制作JKS证书,具体的命令如下:D:\Program Files\Java\jre1.8.0_301\bin keytool -genkey -v -keystore dlq6.jks...

Css3中position:sticky无效...

有同学在前端写css代码时,遇到问题,使用的css3,写的是position:sticky,想要内容滚动到该区域,该区域自动置顶滑动。但一直无效,经过丁老师研究后发现,该区域没有定义高度,而使用position:sticky时,是必须要...

Bagisto使用常见问题与解决方法

Bagisto是一款强大的跨境电商平台软件,很多客户在初次安装和使用时,会或多或少遇到一些解决不了的情况。丁老师整理了一些常见的Bagisto问题以及解决方法以供查阅。问:安装Bagisto时出现"Command compos...

推荐文章

小程序开发的流程费用以及需要什么准备材料?

小程序定制开发的流程和费用,以及需要准备的材料,(包括但不限于微信小程序、百度小程序、支付宝小程序、抖音小程序、小红书小程序)具体如下:一、小程序开发的行政流程1.确定软件开发公司,和开发公司签订合同2.甲方支付首期开发费用3.乙方开始进行...

Mui的toast修改位置居中

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

IDEA IDE换行自动显示的}括号如何去掉

在使用idea旗下的产品,如intellij idea,php storm,web storm时,有的时候编辑前端页面JS,在换行时经常会自动出现个}大括号,这一点程序不是很智能,其实后边都已经有括号了。比如下图这样:那么如何解决这个问题呢...

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

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