Full video background using video.js

Question

I'm trying to make a full screen video background that always shows the full size even on window resize.

here it's the site: http://webkunst.comeze.com/test/

this is the problem I have:

on wide screen it shows like this: http://webkunst.comeze.com/test/wide.png

and on vertical screen it shows like this: http://webkunst.comeze.com/test/vertical.png

As you can see it always put some black bars to the video instead of resizing the video to the full of the screen.

This is my markup:

           <div id="full-background">
                <video class="video-js vjs-fullscreen"  autoplay preload="auto"  poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
                    <source src="video/1.mp4" type='video/mp4' />
                </video>
            </div> 

with this css:

#full-background {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}


.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute;
  /* IE6 Full-window (underscore hack) */

}

I'm using the video.js plugin: http://videojs.com/

Any ideas and how to make the video full size without showing black bars on the side or top/bottom?

Answer 1

Have you tried BigVideo.JS? It uses Video.JS as the core and builds on top of it. It only requires jQuery.