Redimensionner vidéo html5 (changer le ratio)

Pour un fond vidéo sur un site web qui doit prendre tout l'espace disponible. J'ai essayé pas mal de truc et je me suis finalement rabattu sur cette solution :

function fnSizeVideo(){
	var ww = $(window).width();
	var wh = $(window).height();
	var vw = 640;
	var vh = 360;
	
	$("#vid").height("");
	$("#vid").width(ww);
	
	if($("#vid").height() < wh){
		$("#vid").width("");
		$("#vid").height(wh);
	}
}

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

Ça ne me plaît pas trop puisqu'il manque des bout de la vidéo en fonction du ratio de l'écran.

Au passage, j'ai tenté un truc comme ça :

var inLargeur = 0;
var inHauteur = 0;

$(function() {

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

	$("#v").bind('ended', function() {
		this.play();
	});
});

function draw() {
	inLargeur = $(window).width();
	inHauteur = $(window).height();

	$("#canvaVideo").attr({
		'width' : inLargeur,
		'height' : inHauteur
	});

	var c = document.getElementById("canvaVideo");
	var v = document.getElementById("videoFond");
	var con = c.getContext("2d");
	con.drawImage(v, 0, 0, 640, 360, 0, 15, inLargeur, inHauteur);

	setTimeout("draw()", 1000 / 25);
}

C'est à dire copier tous les 25ème de seconde l'image de la vidéo dans un canva puis redimensionner le canva. Ça fonctionne hein. Mais par contre, ça fera exploser un viel ordinateur.

J'ai essayé un peu les css transform, mais sans parvenir au résultat escompté. Quelqu'un aurait une idée ?