Равная высота для встраивания видео и изображения в одну строку

Question

У меня есть две 50% ширины div. Один из них - простой образ, а другой - встраивание 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/

Answer 1

Вы не сможете изменить размер видео youtube, как пропорции из них устанавливаются провайдером. Самое простое решение - изменить размер вашего изображения так же, как и видео. Тогда он также хорошо работает на реагирующем:

<img src="http://placehold.it/756x424/2cb7c0/ffffff"> 

https://jsfiddle.net/ujddekdf/1/