0
Я использую bootstrap, и я хочу иметь встроенное видео и div бок о бок с одинаковой высотой. Пробовал разные решения, размещенные здесь на SO, но не смог заставить их работать.Bootstrap встроенное видео и div одинаковой высоты
HTML & CSS, как это:
header {
\t background: url("../img/header.jpg");
\t background-size: cover;
\t min-height: 595px;
\t font-family: Myriad Pro;
\t color: #FFF;
\t text-align: center;
\t font-weight: bold;
\t padding-top: 60px;
}
.headerForm {
\t background-color: rgba(0, 0, 0, 0.6);
\t border-radius: 8px;
\t margin-top: 25px;
\t padding: 25px;
\t text-align: left;
\t height: 100%;
}
.form {
\t color: #fff;
\t text-align: center;
\t width: 100%;
}
.form input {
\t color: #a5a5a5;
\t margin-right: 5px;
\t margin-top: 10px;
}
.headerVideo {
\t border: 10px #FFF solid;
\t border-radius: 8px;
\t margin-top: 25px;
\t margin-bottom: 25px;
}<div class="container-fluid">
\t <div class="row">
\t \t <div>
\t \t \t <header>
\t \t \t \t <h2>Title</h2>
\t \t \t \t <small>Slogan</small>
\t \t \t \t <br>
\t \t \t \t <div class="col-sm-6">
\t \t \t \t \t <div class="headerForm">
\t \t \t \t \t \t <h3>
\t \t \t \t \t \t \t Be contacted by a and receive
\t \t \t \t \t \t \t updates about the new .
\t \t \t \t \t \t </h3>
\t \t \t \t \t \t <small class="form">
\t \t \t \t \t \t \t Sign up for information about , events,
\t \t \t \t \t \t \t demonstrations and more.
\t \t \t \t \t \t </small>
\t \t \t \t \t \t <form action="#" class="form">
\t \t \t \t \t \t \t <input type="text" name="firstname" value="Etunimi">
\t \t \t \t \t \t \t <input type="text" name="lastname" value="Sukunimi">
\t \t \t \t \t \t \t <input type="email" name="email" value="Sähköposti">
\t \t \t \t \t \t \t <input type="phone" name="phone" value="Puhelinnumero">
\t \t \t \t \t \t \t <input type="text" name="address" value="Osoite">
\t \t \t \t \t \t \t <input type="text" name="postal" value="Postinumero">
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <input type="submit" value="Submit">
\t \t \t \t \t \t </form>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="col-md-6">
\t \t \t \t \t <div class="headerVideo embed-responsive embed-responsive-16by9">
\t \t \t \t \t \t <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </header>
\t \t </div>
\t </div>
</div>Вот как это отображается в браузере: 
Это красный прямоугольник там показано, как левый ДИВ не имеющий той же высоты, что и правый div. Я хочу, чтобы они были одинаковой высоты, всегда. Любая помощь приветствуется!