页面背景视频固定位置不随页面滚动而移动

1、使用CSS中的background-attachment属性，将页面背景设置为固定背景。这会使得背景固定在视口中，随着页面的滚动而滚动。

body { background: url(backgroundvideo.mp4) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; }

2、通过使用position:fixed属性，将背景视频固定到页面上。这样，即使页面滚动，背景视频也会保持在相对的位置。

video { position:fixed; width:100%; height:100%; top:0; left:0; z-index: -1; }

3、使用JavaScript实现响应式的背景视频效果。代码示例：

function resizeVideo() { var video = document.getElementById("bg-video"); var wrapper = document.querySelector(".wrapper"); var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var videoAspectRatio = 16/9; //比例可自行修改 var windowAspectRatio = windowWidth/windowHeight;

if (windowAspectRatio > videoAspectRatio) {
    video.style.width = windowWidth + "px";
    video.style.height = (windowWidth/videoAspectRatio) + "px";
} else {
    video.style.width = (windowHeight*videoAspectRatio) + "px";
    video.style.height = windowHeight + "px";
}

wrapper.style.width = windowWidth + "px";
wrapper.style.height = windowHeight + "px";

}

window.addEventListener('load', function() { resizeVideo(); });

window.addEventListener('resize', function() { resizeVideo(); });

<div class="wrapper"> <video id="bg-video" autoplay muted loop> <source src="backgroundvideo.mp4" type="video/mp4"> </video> </div>