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

【问题标题】：Equal height for video embed and image in one row视频嵌入和图像在一行中的高度相等
【发布时间】：2016-04-14 17:47:12
【问题描述】：

我有两个 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/

【问题讨论】：

标签： css youtube youtube-api height responsive-images

【解决方案1】：

您将无法调整 youtube 视频的大小，因为它的比例由提供商设置。最简单的解决方案是调整图像大小，使其与视频具有相同的比例。然后它也适用于响应式：

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

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

【讨论】：

感谢您的回答，是的.. 但是可以将自定义高度/宽度设置为视频而没有任何问题，但是我不确定如何使其响应式工作。
正如您在小提琴中看到的 - 您需要确保 - 图像和视频具有相同的边缘比例。或者简单地说——它们将具有相同的高度和宽度。然后他们将在移动设备上扩展相同的内容。这回答了你的问题了吗？如果不是，您希望他们在手机上的表现如何？
是的，但是在您的示例中，您正在使图像与视频相同，我希望 VIDEO 的大小与图像相同。所以不知道如何实现这一点。如果我将固定高度/宽度添加到 iframe，它将没有响应。我已将 iframe 的 css 中的宽度/高度更改为与此处的图像相同的大小 - jsfiddle.net/ujddekdf/2，但再次无法弄清楚如何使其响应：/
老兄，物理上不可能将两个大小/比例不同的对象以相同的大小并排放置。他们只是不匹配。您可以将图像缩小（裁剪），或将视频放大，但更大的视频必须被拉伸，这没有任何意义您可以扩展 youtube 视频
嗯，但在我上次的 jsfiddle 更新中，图像和视频都具有相同的纵横比/大小。我已通过删除一些 css 参数将其更新为jsfiddle.net/ujddekdf/3，因此如果您将窗口放大，您会看到图像和视频大小相同，但它在响应式中不起作用。