使用video标签设置视频为网页背景

苍山洱海_fckcpu

已于 2022-03-06 07:01:01 修改

阅读量3.5k

点赞数 2

分类专栏：前端文章标签： html css 前端

于 2022-02-23 23:00:18 首次发布

本文链接：https://blog.csdn.net/m0_37636763/article/details/123100826

版权

前端专栏收录该内容

4 篇文章

订阅专栏

利用position:fixed让video标签脱离文档流，这样网页内其他元素就可以和video重叠

设置width:100%按比例拉伸video元素使其可以随网页大小缩放

代码：

<video
    autoPlay // 自动播放
    loop    // 循环播放
    muted   // 视频静音
    src="视频连接">
</video>
 <style>
    video {
        position: fixed;
        width: 100%;
        z-index: -1;
        top:0;
    }
</style>

需要注意的是，由于video标签与页面其他元素的位置可能不同，导致video相对于页面的位置也不同，例如：

<body>
    <div class="div">
        <div>1</div>
        <div>2</div>
        <video playsinline="" autoplay="" muted="" loop=""
        </video>
    </div>
</body>

此时应该配合top/left/right/bottom和z-index来设置video的位置和级别

或者调整vedio位置，使其在所有元素最上，并且设置z-index:-1（级别最低）也能达到同样效果

<style>
        .div div:nth-child(1) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .div div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        video {
            position: fixed;
            width: 100%;
            z-index: -1;
            top:0            
        }
    </style>