Video as background

Question

Hi, I just love the cool page and would like to know how they did it.

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

If someone knows or can give me a starting point for developing it, that would be great.

Thank you for your time.

Answer 1

Looking at the source, it seems that they used the new 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> 

It also uses Flash, certain conditions are met.

The video frame has a JavaScript hook that automatically resizes the video to fit:

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

It is located at the back due to its CSS properties:

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