视频嵌入和图像在一行中的高度相等

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/