视频无法使用div css背景进行缩放 - CSS

如果想要在网页中展示视频，有时会考虑将视频作为背景，那么如何在这种情况下实现视频缩放呢？

一般情况下，如果想要对图片进行缩放处理，可以使用CSS中的background-size属性，但是对于视频来说，这个属性是无效的。

解决方法

一种解决方法是使用JavaScript来控制视频的大小和位置。具体实现步骤如下：

1. 使用HTML5 video元素来插入视频

<video id="video" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

2. 使用CSS将视频位置设为fixed，覆盖在整个屏幕上。

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

3. 使用JavaScript获取浏览器窗口的大小，并将视频的大小和位置与其保持一致。

var video = document.getElementById('video');

function resizeVideo() {
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var videoAspect = 1920 / 1080; // 视频宽高比为16:9
  var windowAspect = windowWidth / windowHeight;
  var scale = windowAspect > videoAspect ? windowHeight / 1080 : windowWidth / 1920;
  var videoWidth = 1920 * scale;
  var videoHeight = 1080 * scale;
  video.style.width = videoWidth + 'px';
  video.style.height = videoHeight + 'px';
  video.style.left = (windowWidth - videoWidth) / 2 + 'px';
  video.style.top = (windowHeight - videoHeight) / 2 + 'px';
}

window.addEventListener('resize', resizeVideo);
resizeVideo();

代码片段如下：

```html
<video id="video" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

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

var video = document.getElementById('video');

function resizeVideo() {
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var videoAspect = 1920 / 1080; // 视频宽高比为16:9
  var windowAspect = windowWidth / windowHeight;
  var scale = windowAspect > videoAspect ? windowHeight / 1080 : windowWidth / 1920;
  var videoWidth = 1920 * scale;
  var videoHeight = 1080 * scale;
  video.style.width = videoWidth + 'px';
  video.style.height = videoHeight + 'px';
  video.style.left = (windowWidth - videoWidth) / 2 + 'px';
  video.style.top = (windowHeight - videoHeight) / 2 + 'px';
}

window.addEventListener('resize', resizeVideo);
resizeVideo();