css - 動画の埋め込みと画像を 1 行で同じ高さにする

Question

2 つの 50% 幅の div があります。1 つは単純な画像で、もう 1 つは YouTube の埋め込みです。

私が達成したいのは、両方の要素（画像とビデオ）の高さを同じにすることです。これがレスポンシブでも同じように機能する必要があります。

動画の埋め込みにhttp://embedresponsively.com/ cssを使用しようとしましたが、正しく機能させる方法がわかりません。

これが私がやりたいことです：

これは私のjsfiddleです：

<div class="content">
<div class="left">
    <img src="http://placehold.it/756x560/2cb7c0/ffffff">
  </div>
  <div class="right">
    <div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
  </div>
</div>

https://jsfiddle.net/ujddekdf/