Bootstrap embedded video and div same height

Question

I'm using bootstrap and I want to have an embedded video and div side by side with same height. Tried different solutions posted here on SO, but couldn't get any of them to work.

HTML & CSS is like this:

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>   

Here is how it shows up in browser:

That red rectangle there shows how left div is not having the same height as right div. I want them to be same height, always. Any help is appreciated!

Answer 1

Answer for this was obvious. Added fixed heights for both .headerVideo and .headerForm and fixed margins.

.headerVideo {
    border: 10px #FFF solid;
    border-radius: 8px;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 300px;
}

.headerForm {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 25px;
    text-align: left;
    height: 300px;
}