使用jquery的全屏视频背景

使用 Jquery 实现全屏视频背景的攻略如下：

1. 准备工作

在使用 JQuery 之前，需要先在 HTML 文件中引入 JQuery 库，通过以下代码将 JQuery 引入 HTML 中：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

同时，需要在 HTML 中插入视频标签，通过以下代码将视频插入到 HTML 中：

<video src="yourvideo.mp4" autoplay loop muted></video>

其中，src 属性为视频资源的路径；autoplay 属性表示视频自动播放，loop 属性表示视频循环播放，muted 属性表示视频静音播放。

2. 使用 CSS 实现全屏背景视频

为了让视频铺满整个网页，需要使用 CSS 实现全屏背景视频。

video{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
}

其中，position 属性为 fixed，表示视频的定位方式为固定定位；right、bottom 属性为 0，表示视频位于页面的右下角；min-width、min-height 属性为 100%，表示视频最小宽度和高度都为 100%，即铺满整个页面；width、height 属性为 auto，表示视频的宽度和高度都自适应；z-index 属性为 -100，表示视频在所有层级的最低层，不会遮挡其他元素；background-size 属性为 cover，表示视频可以按比例缩放，铺满整个容器。

3. 使用 JS 来控制视频播放的大小和位置

为了让视频居中且高度自适应，需要使用 JS 来控制视频播放的大小和位置。

首先，需要将视频标签用一个 div 包裹起来，并给这个 div 设置一个 ID。

<div id="video-container">
  <video src="yourvideo.mp4" autoplay loop muted></video>
</div>

接着，在 JS 中获取这个 div 的高度，并设置视频的高度和宽度为这个 div 的高度和宽度。

jQuery(document).ready(function($) {

  var videoWidth, videoHeight;

  function sizeVideo() {
    var $container = $('#video-container');

    videoHeight = $container.outerHeight();
    videoWidth = $container.outerWidth();

    $container.find('video')
      .width(videoWidth)
      .height(videoHeight);

  }

  sizeVideo();

  $(window).resize(function() {
    sizeVideo();
  });
});

这段代码首先定义了两个变量 videoWidth 和 videoHeight，用来存储容器的宽度和高度。然后定义了一个 sizeVideo 函数，该函数通过获取容器的宽度和高度，然后将视频的宽度和高度设置为容器的宽度和高度。最后，在 document 准备好并且窗口大小改变时调用这个函数。

示例说明

示例一：视频自适应和居中

现在有一个需求，要求将一个视频作为网站的背景，并且视频需要自适应和居中。我们可以通过以下代码来实现：

<div id="video-container">
  <video src="yourvideo.mp4" autoplay loop muted></video>
</div>

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#video-container video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

jQuery(document).ready(function($) {

  var videoWidth, videoHeight;

  function sizeVideo() {
    var $container = $('#video-container');

    videoHeight = $container.outerHeight();
    videoWidth = $container.outerWidth();

    $container.find('video')
      .width(videoWidth)
      .height(videoHeight);

  }

  sizeVideo();

  $(window).resize(function() {
    sizeVideo();
  });
});

这段代码将视频放在一个容器 div 中，并将容器定位为固定定位，铺满整个页面。同时，视频设置最小宽度和最小高度为 100%，保证视频铺满整个容器。视频设置绝对定位，并使用 transform 属性将视频居中。

示例二：添加遮罩层

有时候，我们希望将视频转化成黑色和白色的，添加一个遮罩层可以非常方便地实现这个效果。下面来看一下如何添加遮罩层。

<div id="video-container">
  <video src="yourvideo.mp4" autoplay loop muted></video>
  <div class="overlay"></div>
</div>

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#video-container video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

这段代码实现了一个黑色 30% 透明度的遮罩层。遮罩层使用绝对定位，铺满整个容器，背景颜色为 rgba(0, 0, 0, 0.3)，即黑色 30% 透明度。遮罩层放在视频之上，通过 z-index 属性调整遮罩层和视频的层级。