CSS技巧系列--使用视频作为背景

视频背景

有一些官方网站为了弘扬他们的企业文化，往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上，既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受

预览效果

接下来请看下我制作的一个demo：

预览效果：视频全屏背景案例
下载源码：http://chengqige.com/bg/video/index.rar

大家可以下载源码进行阅读，关键的部分我都做了详细的注释

核心代码展示

css部分

* {
    margin: 0;
    padding: 0;
}

.video-box {
    position: relative;
    height: 100vh;
    background-color: #C1CFF7;
    /*进行视频裁剪*/
    overflow: hidden;
}

.video-box .video-background {
    position: absolute;
    left: 50%;
    top: 50%;
    /*保证视频内容始终居中*/
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /*保证视频充满屏幕*/
    object-fit: cover;
    min-height: 800px;
}

html部分：

<div class="video-box">
   <video class="video-background" preload="auto" loop playsinline autoplay src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" tabindex="-1" muted="muted"></video>
</div>

上述css+html代码可以完美的运行出效果，关于object-fill属性大家可以百度一下可以学到不同的属性值

核心模块解读

关键点1：如何使视频铺满屏幕

其实使得视频铺满屏幕，原则上来讲是不可能实现的任务。因为video组件我们不能像图片一样对视频进行拉伸，所以直接设置宽高是行不通的。

小实验：（验证直接设置宽高对video无效）

<!--设置video组件宽300px、高度300px，但是video播放视频的区域并非为正方形-->
<video width="300" height="300" loop playsinline autoplay
       src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" tabindex="-1"
       muted="muted"></video>

实验效果：正方形

原因：视频流不可扭曲拉伸，若同时对视频设置宽高以宽度为基准

其实这个问题在css2.0之前只能依靠js去解决，但是现在css3有新的属性值:object-fill:cover
这个属性值能够让我们的视频充满屏幕，并且不变形

实验代码：

* {
    margin: 0;
    padding: 0;
}

video {
    width: 100%;
    height: 100vh;
    object-fit:cover;
}
div{
	background:red;
	height:100vh
}

<video src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" muted="muted" autoplay="autoplay"></video>
<div></div>

显示效果：

我们发现有一条白色的细缝，这个细缝导致拥有垂直滚动条

解决方案：
对video标签设置display:block

细缝完美解决！

如果有溢出的问题，我们可以使用overflow-hidden就可以解决问题

关键点2：如何使视频适配手机

接下来展示不同设备我的适配效果：

大屏幕：

平板电脑：

手机：

那么如何实现适配呢？

玄机在这里

.video-box .video-background {
    position: absolute;
    left: 50%;
    top: 50%;
    /*保证视频内容始终居中*/
    transform: translate(-50%, -50%);
    width:100%;
    height: 100vh;
    object-fill:cover;
    min-height: 800px;
}

我们保证视频是居中的，也就是说屏幕再小我们只显示居中的部分，两边裁剪掉

以上就是所有技术关键之处