html将视频做成背景
时间: 2023-09-12 15:12:09 浏览: 87
可以使用HTML5的video标签来实现将视频作为背景。具体做法是:
1. 在HTML文档中添加video标签,并设置宽度和高度为100%:
```html
<video id="bg-video" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
```
2. 使用CSS将video标签的位置设置为fixed,将其放置于其他内容的后面,并且设置z-index为-1,使其成为背景:
```css
#bg-video {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
```
3. 如果需要让视频自适应窗口大小,可以使用JavaScript来监听窗口大小变化事件,动态调整video标签的宽度和高度:
```javascript
window.addEventListener('resize', function() {
var videoWidth = window.innerWidth;
var videoHeight = window.innerHeight;
document.getElementById('bg-video').style.width = videoWidth + 'px';
document.getElementById('bg-video').style.height = videoHeight + 'px';
});
```
阅读全文
相关推荐


















