CSS Sizing Height of Video Container - html

Question

I am trying to size video containers height but for some reason, its height is unnecessarily big.
CSS:
.indexVideoContainer{
display:flex;
flex-direction: column;
background-color: #fff;
background-image: url(https://bellroy.imgix.net/cms_images/1259/background-texture-repeat.jpg?auto=format&fit=max);
width: 100%;
}
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
padding-bottom:60.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid black;
}
.videoContainer iframe{
position:absolute;
margin: auto;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
height:60%;
}
Codepen:
https://codepen.io/anon/pen/MZNgYa
Check the .videoContainer class. I added a border for a better demonstration. Its height is unnecessarily big. Expands too much for some reason. How do I make it shorter in a responsive way?
problem image
Edit:
I still have the problem guys.I have managed to fix it with some workaround but i guess i am missing something with video frame and flexbox.

Answer 1

html:
<div class="indexVideoText">
sometext
</div>
<div class="videoContainer">
<iframe title="hQ6TSIFM8I0" width="80%" height="80%" frameBorder="0" src="https://www.youtube-nocookie.com/embed/hQ6TSIFM8I0?autoplay=1&loop=1&playlist=hQ6TSIFM8I0&origin=bellroy.com&modestbranding=1&showinfo=0&rel=0&version=3&mute=1"></iframe>
</div>
CSS
.indexVideoText{
position: relative;
font-family: "PT Serif", serif;
-webkit-font-smoothing: antialiased;
text-align: center;
margin: 5px auto 20px auto;
font-weight: 400;
/* line-height: 32px; */
color: #666;
font-weight: 500;
font-size: 25px;
line-height: 40px;
margin: 0 auto 40px auto;
max-width: 55%;
top:50px;
}
.videoContainer{
position:relative;
height:500px;
overflow:hidden;
border:1px solid black;
background-color:red;
padding-top:20px;
padding-bottom:20px;
}
iframe{
position:absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:70%;
}