My main goal was archieved, i wanted to have a background video on the top of my page but the problem now is that i want the video to be responsive, it kinda is responsive but in the wrong way, when i decrease the screen the video gets smaller, instead of increase the height, what just happens is that the width and the height get smaller i just want the width to get smaller and the height to increase.

Here is a example:

**Current behaviour:**

[![Current behaviour](https://i.stack.imgur.com/XjQxz.png)](https://i.stack.imgur.com/XjQxz.png)

**What i need:**
[![What i want](https://i.stack.imgur.com/d0a9x.png)](https://i.stack.imgur.com/d0a9x.png)

**My html code:**

```
<section class="custom content_section bg_fixed white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">

            <div id="video_overlays"></div>

            <div class="container vertical-center">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2>
                    </div>

                    <div class="description4 centered">
                        <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>

```