HTML5 数字视频工作室主页模板

html5 video元素，全屏视频背景

模板，视频

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2879
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

resizeVideo();

// Resize video
function resizeVideo() {

// get video object
    var $video = $("#sky video"); // must test with flash also
    var $flash = false;
    if ($video.parent().find("object").length > 0) $flash = true;

// calculate width and height
    var w = $(window).outerWidth(true);
    var h = $(window).outerHeight(true);
    var vh = 624; //$video.height();
    var vw = 1264; //$video.width();

var ratio = vw / vh;

// calculate new size
    var nh = h;
    var nw = h * ratio;

// is video wide enough to cover screen? 
    if (nw < w) {
        nw = w;
        nh = w / ratio;
        $video.width(nw);

if ($flash) {
            $video.height(nh);
        } else {
            $video.css("height", "auto");
        }
    } else {
        if ($flash) {
            $video.width(nw);
        } else {
            $video.css("width", "auto");
        }

$video.height(nh);
    }

// offset video so it's positioned in the middle of the available area
    if (nw > w) {
        $video.css("margin-left", -((nw - w) / 2));
        $video.css("margin-top", 0);
    }

if (nh > h) {
        $video.css("margin-top", -((nh - h) / 2));
        $video.css("margin-left", 0);
    }

// set video clipping box size
    $("#sky").height(h).width(w);
}

编译

CSS

html,
body {
    font-family: Lato, sans-serif;
    position: relative;
    height: 100%;
    margin:0;
}
.gm-intro {
    width: 720px;
    margin-left: -360px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    z-index: 10;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.gm-intro #welcometo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 33px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -1px;
    color: #a7a7a7;
    display: inline-block;
    text-align: center;
}
.gm-intro #welcometo img {
    display: inline-block;
    margin-bottom: 40px;
}
.gm-intro #welcometo .smallsep {
    background: #a7a7a7;
    height: 2px;
    width: 50px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 0.3;
}
.gm-intro h1 {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.85;
    margin-bottom: 28px;
}
@media only screen and (max-height: 700px) {
    .gm-intro h1 {
        font-size: 80px;
    }
}
.gm-intro p {
    max-width: 600px;
    margin: 0 auto;
    line-height: 150%;
}
@media only screen and (min-width: 1180px) and (max-width: 1280px) {
    .gm-intro h1 {
        font-size: 80px;
    }
}
.gm-intro h2 {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 50px;
}
.gotosection.arrow-down,
.gotoplace.arrow-down {
    margin-top: 20px;
    display: inline-block;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
.gotosection.arrow-down:hover,
.gotoplace.arrow-down:hover {
    opacity: 0.6;
}
#sky {
    overflow: hidden;
}

HTML

html5 video元素，全屏视频背景

模板，视频

编辑器支持Emmet

快捷键

html5 video元素，全屏视频背景

模板，视频

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：