Fullscreen Background HTML5 Video

Made easy!

by irwan dwiyanto

HTML

<link rel="stylesheet" href="http://www.aaronvanderzwan.com/maximage/2.0/lib/css/jquery.maximage.css">
<script src="http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.maximage.js"></script>
<script src="http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.cycle.all.js"></script>
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>
<p>
    <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p>

CSS

video {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}
p {
    padding:10px;
    position:relative;

    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF00, endColorstr=#FFFFFF00);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF00, endColorstr=#FFFFFF00)";
}

JavaScript

$(function(){
    $(window).load(function(){
        // Helper function to Fill and Center the HTML5 Video
        $('video, object').maximage('maxcover');
    });
});