调整响应式设计的iframe仅限CSS [英] Scaling iframes for responsive design CSS-only

问题描述

很多网站嵌入了YouTube视频。 YouTube现在在手机上工作。如果响应式设计将是一个东西，为什么不应该是一个包含Youtube视频的iframe的东西？

A lot of sites have embedded Youtube videos. Youtube works on phones now. If responsive design is going to be a thing, why shouldn't it be a thing for iframes that contain Youtube videos?

搜索天数（打开和关闭）后找不到一个清楚，简单的解决方案的问题（我是新的HTML / CSS）。很容易扩展iframe宽度，但是为了保持高度相对我发现javascript，jQuery和php的大块，所有非常深奥的初学者在网页设计。我想要一个简单的方法来缩放iframe的高度，总是保持一定的宽高比，无论宽度如何变化。

After searching for days (on and off) I couldn't find a clear, simple solution to the problem (I'm new to HTML/CSS). It's easy to scale iframe width, but to keep height relative I found chunks of javascript, jQuery, and php, all pretty esoteric to a beginner at web design. I wanted a simple method of scaling an iframe's height to always keep a certain aspect ratio, no matter how the width changes.

为了避免这个问题，方法的。以下是您的iframe的初始设置：

To keep this from being an unanswered question, the method's below. Here are the initial settings for your iframe:

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

就是这样。

如果有人也有其他解决方案。

I was wondering if anyone had any other solutions as well.

推荐答案

解决方案是嵌套的divs。一个小hackey，我知道，但它是一个很容易的解决方案，一个问题有太多的解决方案。 Youtube视频在此示例中的宽高比为16：9。您的HTML应如下所示：

The solution was nested divs. A little hackey, I know, but it's a really easy solution to a problem that had too many solutions. Youtube videos keep an aspect ratio of 16:9 in this example. Your HTML should look like this:

<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。空白填充在网络上，所以你应该只是把文本放在下面。

The outer div sets the maximum height and width and allows itself to scale, while the inner div uses the padding attribute to match its height to the width of the containing div (I'm pretty sure). The value should be set at (height*100/width)%, the ratio of the height to the width. The iframe then stretches to fill the whole containing div. Whitespace fills on web, so you should be just fine putting text underneath.

我不知道我在哪里找到它。这是与Stack Overflow上的其他地方的图像完成的，但我认为它是相关的，因为嵌入式Youtube视频是如此常见，它设置为工作为iframe。

I can't remember exactly where I found it. It was done with images somewhere else on Stack Overflow, but I think it's relevant to have it set up to work for iframes since embedded Youtube videos are so common.

这是一个JSfiddle与工作的东西。

这篇关于调整响应式设计的iframe仅限CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！