CODEWITHSUNDEEP
cssflashhtmlbackground
1ftw1
1ftw1

Reputation: 666

Video as a background

Hi just fond a cool page and would love to know how they did it.

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

If anyone knows or could give me a starting point to work it out that would be awesome.

Thanks for your time.

Upvotes: 4

Views: 2436

Answers (1)

user142162
user142162

Reputation:

Looking at the source, it seems they used the new HTML5 <video> tag:

<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 is certain conditions are met.

The video frame has a JavaScript hook which automatically resizes the video to the width size:

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

It's positioned at the back due to its CSS properties:

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

Upvotes: 6

Related Questions