之前介绍过 Videezy：免费的视频素材网站，今天介绍的是同样资源丰富并且基于 CC0 协议，可以随意编辑修改或用于商业用途。如果你是一个视频编辑者，经常需要引用一些视频素材制作视频上传到优酷、腾讯、youtube 等平台，又担心所用的素材侵权，那么 coverr.co 是不错的选择。

coverr.co 官网

http://www.coverr.co/

coverr.co 的视频提供免费的下载，下载下来是一个压缩包文件，里面包含了 mp4、ogv、webm 格式的视频，以及一个 jpg 格式的封面。

Coverr.co 上发布的所有视频都可以免费使用。您可以将它们用于商业和非商业目的。

您不需要向 Videographer 或 Coverr.co 要求许可或提供信用，尽管如有可能，您将不胜感激。

更准确地说，Coverr.co 授权您在未经视频摄录师或 Coverr.co 的许可或归属的情况下，免费下载，复制，修改，执行和使用 Coverr.co 的视频，包括商业目的，不可撤销的非排他性版权许可。 此许可证不包括从 Coverr.co 编译视频来复制类似或竞争的服务的权利。

coverr.co 提供了代码便于你将从网站下载的视频用作于网页背景，对于不懂代码的人很有帮助，该代码可以实现网页全屏视频背景。

html 代码

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden">
            <img src="PATH_TO_JPEG" alt="">
        </div>
    </div>
</div>

CSS 代码

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

JS 代码

//jQuery is required to run this code
$( document ).ready(function() {

    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

function scaleVideoContainer() {

    var height = $(window).height() + 5;
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
    windowHeight = $(window).height() + 5,
    videoWidth,
    videoHeight;

    // console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width');

        $(this).width(windowWidth);

        if(windowWidth < 1000){
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

            $(this).width(videoWidth).height(videoHeight);
        }

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');

    });
}