Embedded object in bootstrap 3?

Question

Bootstrap

Hello!
I have a problem - I'm trying to place the video in the header, but in such a way that when the window expands in width, the video expands, while maintaining an aspect ratio of 16: 9, and fits in height inside the bounding lines marked with two arrows on the right.
As needed:

As it is now:

<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>

Here you can see with your own eyes:
test.mobileindex.ru
When using any braking methods max-width, max-height at the embed-responsive-item class level, the object will fly off the grid.
I have been suffering for the 4th day already, probably the task is quite complicated. I didn't find a solution quickly.