Make a video be full screen size CSS - html

Question

I'm using the videojs.com video player and it works great the only problem is that I want the video player to be the full-screen size instead of using pixels like for example if you are on a smaller screen the video player looks messed up.
I tried to use 100% instead of px but it also messed up a lot.
Is there some other way I can make it fit the whole screen automatically?
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
poster="FF7.png"
data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>

Answer 1

Check the Codepen here
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}

Answer 2

You can use a parent div container for your video, so it acts like a cross browser anchor for your video. Also you can use the media query min-aspect-ratio and max-aspect-ratio.
Codepen example with editor:
http://codepen.io/jonathan/pen/bEbdmz/?editors=110
Codepen example in fullscreen mode:
http://codepen.io/jonathan/full/bEbdmz/
The HTML
<div id="video-wrapper">
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px" poster="FF7.png" data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
</div>
The CSS:
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#video-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
#video-wrapper > #player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor:pointer;
}
#media (min-aspect-ratio: 16/9) {
#video-wrapper > #player {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
#video-wrapper > #player {
width: 300%;
left: -100%;
}
}
And if you want a JavaScript fullscreen solution you could use some of the following:
http://vodkabears.github.io/vide/
http://dfcb.github.com/BigVideo.js/
http://syddev.com/jquery.videoBG/