Видео в качестве фона

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