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.

缩放iframe以响应设计仅限CSS

1 个答案: