Increase height of bootstrap content - html

Question

i have a div that is a content for a video, and it is working fine, but the problem is, that everytime i try to see how it adapts on diferent devices the height of the video just decrease, i think it is the normal behaviour of bootstrap, but the thing is i need that div to increase when the devices are smaller, how can i do that?
here is my html for the video and text inside
<section class="content_section 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><span class="line"></span>Simple solutions for complex problems</h2>
</div>
<div class="description4 centered">
<p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place. </b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<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>

Answer 1

you can do it using media queries. Assuming that the div holding your video player has id #player. Note all the px and vh values used below are just for an example. you may set them as you want. In the below examples smaller devices have the video player with an increased height.
#media screen and (min-width: 1200px ) {
#player {
height:500px; //or height:50vh
}
}
the above code means that for screen sizes having a width above 1200px the height will be 500px ( you can set it to whatever you want)
#media screen and (max-width: 1199px) and (min-width: 600px) {
#player {
height:700px; //or height:70vh
}
}
the above code means that for screen sizes having a width between 600px and 1199px the height will be 700px. and the code below means for screen resolutions below 600px the height of the video player would be 800px.
#media screen and (max-width: 599px) {
#player {
height:800px; //or height:80vh
}
}
Read more about media queries here :
https://www.w3schools.com/css/css3_mediaqueries_ex.asp