HTML5 Video Scaling

According to w3c specs:

The dimension attributes are not intended to be used to stretch the image.

So, how do we scale the actual video? In a project that I'm working on (at home), I wanted to have an HTML5 video element that takes up the entire width and height of the browser window and resized whenever the user resized their browser. Here's what I came up with (using Yii as my PHP framework): Page script:

// you could bind to the equivalent event as well, of course
<video onloadeddata="resizeViewport()" id="background">
    <source src="<?php echo Yii::app()->request->baseUrl?>/assets/video/ed.ogv" />
</video>

.css:

#background
{
    position: absolute;
    -moz-transform-origin: 0 0;
}

.js (jQuery):

$(document).ready(function(){
});

$(window).resize(function(){
    resizeViewport();
});

function resizeViewport()
{
    var d = [$('#background').attr('videoWidth'), $('#background').attr('videoHeight')];

    $('#background').css('-moz-transform', 'scale('+
        $(window).width()/d[0]+','+
        $(window).height()/d[1]
        +')');
}

The scale CSS function is meant to change the dimensions of the image (as opposed to width and height). The other trick here is to ensure that the video has actually loaded so I can extract correct dimensions (which is only known once it's been loaded). Note: The code samples here are intended for FF only (each user agent has a different transform method).