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

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/