html 设置视频尺寸,如何使用CSS控制视频的宽高？

在网页中嵌入视频时，经常会为video标签添加宽高，给视频预留一定的空间。给视频设置宽高属性后，浏览器在加载页面时就会预先确定视频的尺寸，为视频保留合适大小的空间，保证页面布局的统一。为video标签添加宽、高的方法十分简单，可以运用width和height属性直接为video标签设置宽高。示例代码如下。

占位色块

浏览器不支持video标签

占位色块

运行示例代码，效果如图1所示。

图1 定义视频宽高

此时如果更改示例中的代码，删除视频的宽度和高度属性，修改后的代码如下：

video{

background:#F90;

float:left;

}

保存HTML文件，刷新页面，效果如图2所示。

图2 删除视频宽高

从图2可以看出，视频和其中一个灰色文本模块被挤到了大盒子下面。这是因为未定义视频宽度和高度时，视频会按原始大小显示，此时浏览器因为没有办法控制视频尺寸，只能按照视频默认尺寸加载视频，从而导致页面布局混乱。

注意：

通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件(如“格式工厂”)对视频进行压缩。

html 设置视频尺寸,如何使用CSS控制视频的宽高？相关推荐

html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
UEditor 解决拖拽视频元素改变视频尺寸时，无法保存视频尺寸问题的解决方法
UEditor虽然强大,但是bug还是蛮多的.比如插入视频元素后,拖拽视频去缩放尺寸,编辑器并没有将实际的尺寸保存下来.当你点击HTML按钮查看源代码时,width和height还是原来的值,再次点击 ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
php倍速播放,如何让视频慢速播放怎样控制视频的播放速度视频加速/减速播放软件...
不知道大家现在还有没有用DVD或VCD看电视,记得以前在自己家用DVD看碟片的时候,有一个功能让我特别喜欢,就是在观看的时候可以让视频快进,一个多小时的碟片不一会儿就能看完了,虽然这种看法有点走马观花 ...
css控制文本的行高
line-height可以控制文本的行高示例 <p> 这是一个标准行高的段落. 在大多数浏览器默认行高约20 px. 这是一个标准行高的段落. 这是一个标准行高的段落. </p&g ...
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
如题,本人经常设置宽高都是这种,先通过js获取父元素的宽高,别的子元素的宽高.再通过js赋值 this.height = this.$refs.xxx.offsetHeight - this.$ref ...
CSS学习笔记八——宽高自适应
宽高自适应一.宽度自适应二.高度自适应三.浮动元素的高度自适应四.窗口自适应五.结语一.宽度自适应不写宽度或者写 width:auto就表示宽度自适应,可用于横栏或导航栏. 与 widt ...

html 设置视频尺寸,如何使用CSS控制视频的宽高？

html 设置视频尺寸,如何使用CSS控制视频的宽高？相关推荐

最新文章

热门文章