Oleg

<div class="foo">
	<div class="a"></div>
		<div class="bc">
			<div class="b"></div>
			<div class="c"></div>
		</div>
</div>

body {
  margin: 0;
}
.foo {
	display: flex;
	flex-direction: row;
	background:#ccc;
	height: 250px;
}
.foo .a {
	height: 100%;
	width: 200px;
	background: red;
}
.foo .bc {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.foo .bc .b {
	height: 50%;
	background: blue;
}
.foo .bc .c {
	height: 50%;
	background: green;
}

<div>
<iframe src="https://www.youtube.com/embed/p4nohCcIPuI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

div {
	position: relative;
	width: 100%;
	padding-bottom: 56.18%;
}
div > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}