CSS3及Javascript实现网页视频背景居中并自动拉伸

最近笔者在写一个个人主页时碰到了一个问题，就是希望用视频作背景但不能实现随窗口大小自动拉伸并居中，经过学习研究，笔者最后总结了两种方法实现，分别是css3的新属性和JavaScript实现。

CSS3

首先声明一下追求的效果：视频居中，并且尽可能使视频更多内容能显示。

容器（div） > 视频（video）
容器css设置为

    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

CSS3新增了object-fit属性，属性值有：fill、contain、cover等，三者是否能满足要求？可以和笔者一起测试一下。（笔者用的视频宽高为1080*1920）

视频css若是设置为：

.video_box{
	position: absolute;
	//设置居中显示
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    
    object-fit: fill; //contain和cover其实是一样的效果
}

因为视频宽高太大所以直接以原比例居中填充了容器，使得一部分内容被裁剪了，很明显不满足要求。那么我们给视频加上宽高的限制。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: fill; 
}

这里注意宽高限制都要加上，若是少一个效果将会偏向满足另一个。此时很明显有问题，视频会被拉伸来适应容器大小，使得视频显示失去比例，fill不符合我们的需求。
若是使用contain，则将会尽可能满足高度与容器相同而宽度按原比例，也不满足要求。
而cover则能很好的满足我们的要求。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

Javascript

其实分析要求后的大概意思就是，尽量满足视频宽或高中至少一项符合容器宽或高，另一项必须按原比例拉伸至至少充满容器。那么可以写出以下JS代码：

        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.video_box video');
            if(w / h > 1920 / 1080) { //1920*1080为视频宽高比
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

css设置为

.v_w{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}
.v_h{
    /* width: 100%; */
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}

思路为，若是宽高比过大则满足宽度适配容器，如果宽高比过小就满足高度适配容器。
但还有一点小问题，在首次加载并且在页面大小改变前js都不会执行，所以再加上一个onload（‘load’）事件使第一次打开页面后也能应用宽高设置。完整js代码为:

		window.onload = function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        }
        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

js代码为笔者拙见，若有更好的实现方法欢迎多与笔者交流！