Embeded object in bootstrap 3?

Question

[glinkap]

Здравствуйте!
У меня проблема - пытаюсь разместить видео в шапке, но таким образом чтобы при расширении окна по ширине, видео расширяясь, сохраняя aspect ratio 16:9, вписывалось по высоте внутрь ограничивающих линий, отмеченных двумя стрелочками справа.

Как нужно:


Как сейчас:

<div style="height:500px;
			background-color:#ccc;">
	<div class="embed-responsive embed-responsive-16by9">
		<iframe class="embed-responsive-item" src="http://player.vimeo.com/video/20831914?&autopause=1&badge=0&byline=0&color=00adef&portrait=0&title=0"></iframe>
	</div>
</div>

Здесь можно посмотреть воочию:
test.mobileindex.ru

При использовании любых тормозящих способов max-width, max-height на уровне класса embed-responsive-item приводит к слетанию объекта с сетки.
Уже 4й день мучаюсь, вероятно задача достаточно сложна т.к. быстро решения на нее не нашел.