视频作为背景

Question

你好喜欢一个很酷的页面，很想知道他们是怎么做到的。

http://www.six60.co.nz/

如果有人知道或者可以给我一个起点，那就太棒了。

感谢您的时间。

Answer 1

查看来源，似乎他们使用了新的HTML5 <video>代码：

<video id="hv" loop="loop" preload="auto">
    <source src="/resources/video/six60-home.mp4" type='video/mp4' />
    <source src="/resources/video/six60-home.webm" type='video/webm' />
</video>

它也使用Flash满足一定的条件。

视频框有一个JavaScript钩子，可自动将视频大小调整为宽度尺寸：

function resizeContainers() {
    $(".resize-container").css("min-height", currentWindowSize.height + "px");
    $(".resize-container-to-window").css("height", currentWindowSize.height + "px");
}

由于其CSS属性，它位于后面：

#home-video 
{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    margin: 0;
    z-index: 1;
}