Javascript-форум - Видео в заголовке сайта

Привет, форумчане.
Решил я вставить видео в шапку сайта
Знаю, что так делать нельзя по ряду причин, но мне уже просто принципиально интересен данный вопрос.
Шапка у меня на всю ширину окна браузера, высота 300px

<style>
.is_overlay{ display: block; width: 100%; height: 300px; }

#trailer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}

#trailer > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
        min-width: 100%; 
        min-height: 300px;
        width: auto;
        height: auto; 
}
</style>
</head>
<body>
<div id="trailer" class="is_overlay">
	<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
		<source src="vid/video.mp4"></source>
		<source src="vid/video.webm" type="video/webm"></source>
	</video>
</div>
</body>

Видео проигрывается, но выходит за рамки div т.е. видно только верхнюю половину видео
Если сделать видео в высоту 300 px то тогда оно сохраняет пропорции (появляются полосы по бокам)
А можно ли без дополнительных выеб*нов сделать что бы видео растягивалось именно по размерам div, по которым хочет моё величество, а не браузер?
P.S. инфы я посмотрел море, но всё сводиться к тому, что я вижу верхушку видео либо с сохранением пропорций