本文由大漠根据Rachel McCollin的《Making Embedded Content Work In Responsive Design》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://mobile.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/。
——作者：Rachel McCollin
——译者：大漠
在响应式设计的网页布局中有一些元素没有发挥好，直接损坏响应式设计的布局。其中之一就是iframe元素，因为有时候你需要在页面中嵌入外部资源，比如说YouTobe的视频，这个时候就需要用到iframe元素。
在这篇文章中，我将会向您介绍如何使用CSS将嵌套进来的内容具有响应式的效果，比如说视频、日历等能随着浏览器的视窗自动调整。那于在网站上嵌入外部视频，而你又不想添加额外的标签，我们也将会介绍如何使用JavaScript来替代CSS，让其在响应式设计的网站中能自动调整。
你可以在我的博客中看到这些技术的示例。——Rachel McCollin
嵌入内容的标记
在你的网站上嵌入内容，我们可以直接使用YouTube提供的代码，复制和粘贴到网站代码中。我常向我的用户推荐使用YouTube，因为这样可以帮助他们节省服务器的空间，而且用户无论是用浏览器或设备，YouTube都可以正常的显示视频。目前主要有两种方法向网站中嵌入视频，一种是HTML5的video元素，但其在IE低版本中无法得到支持；另一种就是通过Flash，但其在iOS设备是无法工作。
当你在Web中嵌入外部来的资源时，可以通过iframe来嵌入：
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
iframe可以将嵌入的外部资源可以在你的网站中显示出来，因为它包含了一个指向内容来源的网址。
你可以发现，在iframe中包含了width和height属性。移除这两个属性，iframe会不显示，因为他不会有尺寸。而且非常的遗憾，我们无法通过CSS来解决这个问题。
width属性意味着，当屏幕小于560px的时候，嵌入的内容会超出容器，将打破整个布局。在下面的示例中，我将上面的代码放置到我的博客代码中。下面的截图是来自于iPhone竖屏（宽度为320像素）中的效果，页面其他部分都缩小了，来让嵌入的内容自适应屏幕宽度。这效果非常的不理想。
幸运的是，接下来我们主要围绕CSS的方法来解决这个问题。首先向大家介绍如何让嵌入的视频解决这个问题，接下来就是嵌入的日历。
响应式的视频
HTML
为了能让嵌入的视频在Web中实现响应式效果，你需要在iframe标签外添加一个容器div来包裹他。其结构类似这样：
<div>
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
</div>
接下来是给这个容器div和iframe添加CSS样式。
CSS
首先我们给包含iframe的div容器添加一个类名video-container。正如Thierry Koblentz在ALA中发表的《“Creating Intrinsic Ratios For Video”》一文所述，可以在CSS样式表中添加下面的代码：
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
这段代码做了几件事：
- 设置
position的值为relative，用来给iframe设置为absolute值； - 设置
padding-bottom值来计算视频的纵横比例。在我们的示例中，宽高的比例是16:9，表示高度是宽度的56.25%。如果宽高比是4:3，我们设置padding-bottom值为75%； - 设置
padding-top值为30px，主要为Chrome指定一个空间，这是指定给TouTobe的； height设置为０，因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度；- 设置
overflow的值为hidden，确保溢出的内容能够隐藏起来。
我们也要给iframe自身设置样式。在你的样式文件中添加下面的样式代码：
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
iframe放置在div.video-container容器里，我们是通过下面的方式让iframe工作的：
- 使用绝对定位，那是因为包含他的容器的高度为０，如果
iframe进行正常的定位，我们将给他的高度也是0; - 设置
top和left，将iframe定位在容器的正确位置上； - 设置
width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。
这样做之后，视频将根据屏幕的宽度进行调整，下图是在桌面上的效果：
而下图是在宽度为320px屏幕下的效果：
让我们继续了解其他的嵌入内容——特别是google的日历。
响应式日历
HTML
设置嵌入内容具有响应式的CSS样式本质上是相同的，但不同的内容具有不同的纵横比例，这意味着，你要设置相应的padding-bottom值。
下面是一个嵌入Google日历的网站的屏幕的截图。正如你所看到的，在小屏幕上，日历打破了整个布局。在这种情况之下，日历在网站上显示正确的宽度，但日历超出屏幕的宽度。
嵌入日历的结构如下：
<iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
要制作响应式日历，需要给iframe外添加一个命名为.calendar-container的div容器：
<div>
<iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no">
</iframe>
</div>
接下来的步骤是给这个div写样式。
CSS
写在日历上的CSS和视频的样式基本一致，但有两个例外：宽高的比例有所不同，而且不需要设置padding-top的值。
将下面的样式添加到样式表中：
.calendar-container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
在这个例子中，iframe的宽度为800px,高度为600px，他们的宽高比例为4:3。所以设置padding-bottom的值为75%。
这样做之后，我们需要给容器中的iframe设置样式：
.calendar-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
这跟应用在视频上的样式是相同的。
现在日历可以根据浏览器窗口调整大小，下图是Android手机上Opera浏览器中的日历效果：
只要你记得使用适当的元素来包裹嵌入进来的日历和视频，那么这个CSS将适应于任何嵌套到你的网站中的视频与日历。
问题是，日历可以在整个页面是显示，但它几乎是无法使用，因为点击目标太小，甚至重要信息也看不到。如果你想完全显示日历，你也可以，你可以通过一些简单的CSS设置来实现(例如设置display:block或者table)，或者使用w3widgets Responsive calendar或者Calendario在你自己的日历上，你的用户会喜欢上。
使用CSS或JavaScript实现响应式视频
如果你正在使用一个CMS来开发一个响应式的网站，你可以通过一些编辑器嵌入一些视频。你可以通过你的编辑器来编辑EmbedResponsively.com，生成响应式的<embed>代码。实际上你可以通过javascript来解决，而不需要添加额外的标签和CSS。
到目前为止，大多数的解决方案都是依靠javascript的插件，但在一定的程度上，这对性能会有所影响。一个流行的插件是Todd Motto开发的FluidVids.js。FluidVids.js的简单运用:
- 从Github上下载文件下来，并解压缩出来，将文件放到你的项目路径中。把解压出来的js放在一个命名为
dist的文件目录中。 - 在
<head>中按下面的方式调用js
<script src="dist/fluidvids.js></script>
你需要做的就这些，只要支持js的设备，都可以使视频自动调整。它不仅适用于YouTube而且还适用于Vimeo。但问题是，如果你的用户不支持js或还没加错或者没有正确加载，可以在样式表中添加下面的样式，来回退：
iframe {
max-width: 100%;
}
这将确保你的视频会根据浏览器的宽度自动调整视频的宽度。但不会调整视频的高度，不幸的是，iframe中是行不通这种方式。因此，视频不会破坏你的布局，但它也不会怎么好看。所以这不是一个好的选择，如果能避免使用js还是尽量避免。
响应式的Google地图
除了在页面中嵌入视频和日历之外，还有就是在网站中嵌入地图。让嵌入的地图也具有响应式的功能。基本上采用的技术是相同的，同样通过padding-bootm来调整地图的宽度和高度的比例。
通常情况下，生成的Google地图的代码类似于：
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>
同样在iframe外套一个div容器，并且运用相似的样式：
.google-maps {
position: relative;
padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
此时的结构变成这样：
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe>
</div>
同样，我们可以通过EmbedResponsively生成代码。
总结
嵌入的内容常常会破坏响应式设计的布局，因为iframe设置了固定的宽度值。在这篇文章中，我们看到了如何给iframe外添加一个容器div，并且通过CSS确保iframe可以根据视窗自动调整其宽度。
有时候这样处理并不够好，你可能需要拿出更好的解决方案，因为调整大小并不是一种解决方案。我们可以使用js生成embed代码来解决。在某些情况下，这也是必要的处理方法，特别是编辑和处理许多影片，不具备所需的技术，或者在CMS开发中不允许嵌套标签之下。
你是如何在你的网站中嵌套第三方内容？你有更好的技巧或技术吗？你工作流程中又是如何嵌入第三方内容？如果你有相关的分享可以在评论中与我们一起分享。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
英文原文：http://mobile.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
中文译文：http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html