我正在使用引导程序，我希望嵌入的视频和 div 并排具有相同的高度。尝试了在 SO 上发布的不同解决方案，但无法让它们中的任何一个工作。
HTML & CSS 是这样的：
header {
background: url("../img/header.jpg");
background-size: cover;
min-height: 595px;
font-family: Myriad Pro;
color: #FFF;
text-align: center;
font-weight: bold;
padding-top: 60px;
}
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-top: 25px;
padding: 25px;
text-align: left;
height: 100%;
}
.form {
color: #fff;
text-align: center;
width: 100%;
}
.form input {
color: #a5a5a5;
margin-right: 5px;
margin-top: 10px;
}
.headerVideo {
border: 10px #FFF solid;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
}<div class="container-fluid">
<div class="row">
<div>
<header>
<h2>Title</h2>
<small>Slogan</small>
<br>
<div class="col-sm-6">
<div class="headerForm">
<h3>
Be contacted by a and receive
updates about the new .
</h3>
<small class="form">
Sign up for information about , events,
demonstrations and more.
</small>
<form action="#" class="form">
<input type="text" name="firstname" value="Etunimi">
<input type="text" name="lastname" value="Sukunimi">
<input type="email" name="email" value="Sähköposti">
<input type="phone" name="phone" value="Puhelinnumero">
<input type="text" name="address" value="Osoite">
<input type="text" name="postal" value="Postinumero">
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-6">
<div class="headerVideo embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
</div>
</div>
</header>
</div>
</div>
</div> 以下是它在浏览器中的显示方式：
那里的红色矩形显示左 div 与右 div 的高度不同。我希望它们始终保持相同的高度。任何帮助表示赞赏！