Full Background HTML5 Video Without Letterboxing - html

Question

There are many questions on here regarding how to do background HTML5 video, but I have no issue with that, it works fine (except for a small issue where it will only play audio and not video until I select something on the page or resize it, see here for that issue: Chrome Only Plays Audio Until Resize
What I want to do is make the video fit the background so that it never has any letterboxing (the lines above/below or on the sides when the aspect ration doesn't match). That means fit width when the height is less than the ratio, and fit height when the width is less than the ratio.
This will cut off some of the video, but that's fine, I just want to get rid of the letterboxing. Is there any way to do this with just CSS, and if not what javascript/jQuery/whatever do I need to use?
My code so far:
#mashvid {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
min-width: 100%;
z-index: -5;
}
<video preload id="mashvid" poster="images/mashvid_poster.png">
<source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
Your browser does not support the video tag.
</video>

Answer 1

I solved it like this, although I'm not sure how solid it is
function dimensionFunction() {
if ($('video').height() <= $(window).height()) {
$('video').height($(window).height());
$('video').width('auto');
} else {
$('video').width($(window).width());
$('video').height('auto');
}
if ($('video').width() <= $(window).width()) {
$('video').width($(window).width());
$('video').height('auto');
} else {
$('video').height($(window).height());
$('video').width('auto');
}
}

Answer 2

I have tried two (2) different jQuery plugins that do a fairly good job with this issue.
http://github.com/georgepaterson/jquery-videobackground
a nice plugin, with callbacks and nav/control functionas and styles, does not work on mobile "so-far-ee" but very nice on windows and osx lion.
and
http://syddev.com/jquery.videoBG/
a simpler plugin easier to customize, but also less robust, same issues with mobile safari but v ery capable otherwise.
the issue i have found is that scaling bg video or img bg attched to body will behave differently in smae browser on diff OS
bot safari and ie refuse to scale width to my liking on windows platforms but behave as expected on osx, your mileage may vary
=-)