为响应式设计缩放 iframe 仅 CSS

Question

很多网站都嵌入了 Youtube 视频。 Youtube 现在可以在手机上使用。如果响应式设计要成为一件事，为什么不应该成为包含 Youtube 视频的 iframe 的一件事？

在搜索了几天（断断续续）之后，我找不到一个清晰、简单的问题解决方案（我是 HTML/CSS 新手）。缩放 iframe 宽度很容易，但为了保持高度相对，我发现了大量的 javascript、jQuery 和 php，对于网页设计的初学者来说都是非常深奥的。我想要一种简单的方法来缩放 iframe 的高度，以始终保持一定的纵横比，无论宽度如何变化。

为了避免这个问题成为一个未解决的问题，方法如下。以下是 iframe 的初始设置：

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

就是这样。

我想知道是否有人也有其他解决方案。

Answer 1

解决方案是嵌套 div。我知道有点 hackey，但对于一个有太多解决方案的问题来说，这是一个非常简单的解决方案。在此示例中，Youtube 视频的宽高比为 16:9。您的 HTML 应如下所示：

<div id="outer">
    <div id="inner">
        <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
</div>

还有你的样式表：

#outer{
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;
}

#inner{
    height: 0px;
    padding-bottom: 56.25%;
}

#inner iframe{
    width: 100%;
    height: 100%;
}

外部 div 设置最大高度和宽度并允许自己缩放，而内部 div 使用 padding 属性将其高度与包含 div 的宽度相匹配（我很确定）。该值应设置为(height*100/width)%，即高宽比。然后 iframe 会拉伸以填充整个包含的 div。空白在网络上填充，因此您应该可以将文本放在下面。

我不记得我在哪里找到它了。它是在 Stack Overflow 上的其他地方使用图像完成的，但我认为将其设置为适用于 iframe 是相关的，因为嵌入式 Youtube 视频非常普遍。

Here's a JSfiddle with the working thing.