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

浏览器不支持video标签

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

图1 定义视频宽高

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

video{

background:#F90;

float:left;

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

图2 删除视频宽高

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

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

猜你喜欢：

在网页中嵌入视频时，经常会为video标签添加宽高，给视频预留一定的空间。给视频设置宽高属性后，浏览器在加载页面时就会预先确定视频的尺寸，为视频保留合适大小的空间，保证页面布局的统一。为video标签添加宽、高的方法十分简单，可以运用width和height属性直接为video标签设置宽高。示例代码如下。占位色块浏览器不支持video标签占位色块运行示例代码，效果如图1所示。图1 定义视频宽高此时... <meta charset="utf-8"> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onc 现在要 设置 视频 为背景，上层还有图片、文字、等； 视频 width、height 大小 和所存放 视频 的div 设置 的width、height 大小 不同， 视频 可能会出现不是理想的效果 这时 视频 wid... 通过元素自身属性 控制 在 HTML 5中，经常会通过为video元素 添加 宽 高 的方式给 视频 预留一定的空间，这样浏览器在加载页面时就会预先确定 视频 的 尺寸 ，为其保留合适的空间，使页面的布局不产生变化。 通过元素自身属性 控制 例：加载一个 视频 并 设置 视频 尺寸 宽 为200、 高 为300。 注意：当不 设置 大小 时，默认为 视频 的 大小 通过元素自身属性 控制 <video width=“200" height="300" src="video/pian.mp4" controls> 浏览器不支持video标签</video> 通过 CSS 改变 视频 宽 高 通过 CSS 改变 视频 宽 高 例：加载一个 视频 使用 CSS 设置 视频 的 宽 为400， 高 为300。 基本语法格式 <style> video{ width:400px; height:300px; </style> </head> <video src="video/pian.mp4" controls> 浏览器不支持video标签</video> </body> 通过 CSS 改变 视频 宽 高 <video width="320" height="240" controls="controls"> 但是有的时候发现 设置 了 视频 的 高 度却并没有发生变化，我们可以 设置 其父元素的 宽 高 ，让video填充满父元素。只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。 object-fit语法 object-fit:fill | contain |