用于在后台登录页使用视频背景,也可定义登录页背景颜色或背景图片。

  1. 视频背景文件可以到 https://coverr.co/ 去下载或直接引用coverr在线的视频文件地址(速度较慢)
  2. 建议将视频文件的第一帧作为背景,这样不会造成视觉误差。
  3. 建议将下载的视频传到第三方空间,再进行引用。

代码

<div id="video_wrapper">
    <video autoplay="" muted="" loop="">
        <source src="https://t1.aixinxi.net/o_1cnh2rofs19skpcq11u6g921qm9a.mp4" type="video/mp4">
    </video>
</div>

    body {
      background:url("https://wx2.sinaimg.cn/large/0060lm7Tly1fvblyjxs3dj31hc0u0tc1.jpg");
      background-size:cover;
    }

    #video_wrapper {
        margin: 0px;
        padding: 0px;
    }

    #video_wrapper video {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -100;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }