在HTML中插入视频 播放尺寸
时间: 2024-10-11 18:11:01 浏览: 24
在HTML中插入视频,如果你想控制视频的播放尺寸,可以使用CSS样式来调整。`<video>`标签本身并不直接定义尺寸,而是通过CSS来设置其容器(通常是`<div>`或者其他包含它的元素)的尺寸。例如:
```html
<div class="video-container">
<video controls width="640" height="360">
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 计算比例 */
padding-top: 30px; /* 添加顶部填充以避免上下留白 */
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
```
在这个例子中,我们设置了`.video-container`的高度为0,并使用百分比来计算视频的实际高度(`padding-bottom`乘以宽度)。这样可以让视频保持宽高比。
阅读全文