HTML5 Video scale modes?
You can do this just with CSS:
video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Obviously use the appropriate vendor prefixes for the transform property
Bonus: to do this with an image, you can use "background-size: cover;" to crop the image to the desired space:
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(background-image.jpg) center;
background-size: cover;
}
Another way to do this with CSS is to use the object-fit property. This works on video or img elements
video {
object-fit: cover;
}
http://caniuse.com/object-fit
http://dev.opera.com/articles/css3-object-fit-object-position/
This is only compatible in Chrome 31+ but is the simplest CSS solution and is a Candidate Recommendation.