视频作为背景

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;
}